Share some tips on TypeScript

Compile TypeScript (hereinafter referred to as ts) in a C++ project

Edit the properties of the ts file and select "Custom Production Tool" as the item type.

Enter the location of tsc and compilation parameters on the command line. Mine is "C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.2\tsc" %(Identity) --outFile %(RelativeDir)/ %(FileName).js -t es5. UNC (Universal Naming Convention) with spaces needs to be enclosed in double quotes. %(Identity) is the location of the compiled file.

　 --outFile is the output parameter, followed by the output location.

-t(--target) is the target type, I use ES5, it can also be "ES3" (default), "ES5", "ES6"/"ES2015", "ES2016", "ES2017" or "ESNext".

Instructions: Just write %(Identity), this is optional.

The output is written as $(FileName).js. This should be used to determine the necessity of compilation.

ps: This is the method I researched, and I feel there is a more standard one. The official did not introduce how to compile in a c++ project.

Quoting the statement of jquery in ts

jquery is not written in ts, so the ts file cannot be found on git. Fortunately, vs provides powerful support for jquery If you create a new html file of any project type and include a js file of any version of jquery, your smart prompt will automatically support $. Next, position the mouse to the left or right of $ and press F12 to view the definition, and it will automatically go to the index.d.ts file. Right-click the label and select Open Directory to find the file and copy it to your own project directory.

Use triple slash syntax to reference the current ts file ///

The .d.ts file is a declaration file, and There is no logical code, just structure.

How to generate a declaration file for your own ts file

Same as before, the tsc compiler can generate a declaration file, only the parameter -d/--declaration is required and ts files.

For example: tsc -d main.ts

Compile ts files using the command line?

Yes, as long as you don’t mind it. The Developer Command Prompt for VS 2017 of VS can use the tsc command directly. You can pin it to the Start screen to improve startup efficiency.

How to solve the problem of not getting the statement

　　declare var swal: (arg: any) => any;

Add that you have a function like swal that does not provide a ts statement, so you can use it freely . Of course, this is a misuse of parameters.

The HTMLElement.remove member in ts does not exist. You can only use the removeChild of its parent object, which is not very convenient.

dom:HTMLElement;

　　(<any>dom).remove();// 就这样勉强的转为any再调用remove吧。

No need to create a class for each object

ts class does not support internal declare class. Therefore, it is not appropriate to declare the member type outside the class.

　　class foo{
　　　　member:{mem1:number, mem2?:string};// 加问号表示可有可无　　}

In this way, member is similar to an inner class.

Event subscription and this parameter

　　class bar{
　　　　sub(){
　　　　　　dom.onclick=function(){this};
　　　　}
　　}

In this way, this in the function function is the dom object.

　dom.onclick=()=>{this};

This this represents an instance of class bar.

Then I want to have the dom object and the bar instance?

Currently I can only use closures:

　　class bar{
　　　　click(node:HTMLElement, ev:MouseEvent){
　　　　　　this...
　　　　}
　　　　dom.onclick = (ev:MouseEvent)=>this.click(dom,ev);
　　}

The dom is passed in with a closure. This is still the this you expect. After all, click is a member function of bar.

Do not use readonly for read-only properties

If you want to modify it, readonly is not convenient for internal access of the class

So you should use Object.defineProperty,ts There are more convenient set/get operation attributes.

　　class baz{
　　　　_attr:[];
　　　　get attr(){
　　　　　　return _attr;
　　　　}
　　}

In this way attr can only be read. To use the attribute feature, you need to set the target option (-t/--target) of the ts compiler to es5 or above.

This article will continue to be updated. I will update it as long as it is related to ts skills. If you also pay attention to typescript technology, please follow me/favorite this article.

btw: cnblogs does not support ts code coloring, and uses JS code coloring.

The above is the detailed content of Share some tips on TypeScript. For more information, please follow other related articles on the PHP Chinese website!