[ts]typescript learning record pit collection

Catalog

One 、tsconfig.json

Two 、tsc --watch Monitor synchronous changes

2.1 An empty class cannot generate the corresponding js file ​ edit

2.2 Delete ts Files will not be deleted synchronously js file

2.3 modify ts File name problem

2.4 modify ts File folder name problem

3、 ... and 、import Auto import classpath exception problem

3.1   The same name ts Class problem  

Four 、 Residual parameter problem ( ...params:any )

5、 ... and 、JSON jsonObj turn string problem

---

Environmental Science

IDE: Visual Studio Code 1.69.1 

npm 8.1.2

node 16.13.2

tsc 4.7.4

---

Supplementary instructions for beginners ：

tsc -init Generate tsconfig.json 

tsc /fileA/xxx.ts Generate xxx.js File to outDir Under specified directory fileA/xxx.js

node /outDir Catalog /fileA/xxx.js perform xxx.js file

One 、tsconfig.json

 "strict": true      Enable all strict type checking options .

If strict checking does not need to be enabled, it is false.

"outDir": "./js"// You want to generate js The catalog of

ctrl + ` Start the terminal ： perform tsc --watch Turn on monitoring ts Change synchronization js change

ctrl + shift + ` Open a new terminal

Two 、tsc --watch Monitor synchronous changes

2.1 An empty class cannot generate the corresponding js file

2.2 Delete ts Files will not be deleted synchronously js file

2.3 modify ts File name problem

modify ts After the file name vscode All... Will be opened synchronously import With this ts Class , Let you save it manually , To synchronize to all corresponding js Of documents import changes .

It is called before modification FoodApple.ts

  Modify the back foot foodapple.js Will open main.ts file （ It quoted FoodApple.ts) Let you save it manually , All files need to be saved manually before they can be synchronized js, If you close it directly at this time vscode, It doesn't sync ,js The code will be with you ts There are differences in the code , Unless you modify the corresponding ts Save before synchronization takes effect .

  Be careful import The corresponding file name foodapple.ts（ Not the class name inside FoodApple No impact ）

At the same time, modifying the file name will add a js（ That is, the new file name .js) At the same time js Files will not be deleted synchronously You need to delete it manually .

2.4 modify ts File folder name problem

After modifying a folder name , All that involve the folder name import All documents will be vscode open , Let you save it manually , Save one by one before synchronizing js, also js The folder name under the directory will not be modified synchronously , You need to manually modify JS Folder name . The following is before and after modification

3、 ... and 、import Auto import classpath exception problem

3.1   The same name ts Class problem  

If it is found that the automatic import does not work normally , Or if you have imported this class, but there are always exceptions and errors when using this class , That must be the same name ts class .（ Compilation is passed ）

Four 、 Residual parameter problem ( ...params:any )

Guess what the output is ？

.

.

.

.

  Yes ！funcA What we get is a any[], altogether 4 The difference is 1, "a", true, 3.14.
funcBBB What we get is a any[], however , caller funcA Only one parameter, namely ([1, "a", true, 3.14])any Array . So the output is 1,a,true,3.14. Because it's just an array （ Tuples ？）

 

If you want to funcBBB Getting is also and funcA The same thing , Just put funcBBB(...params:any) Change to funcBBB(params:any) that will do .

summary ： ... Is the keyword of the remaining parameters , Parameters marked by this remaining parameter keyword , It's not something special similar C# That kind of , It can only be directly understood as ...params:any Equate to any Array , But it is better than direct definition any[] The advantage is that the caller can pass any number any Go in and package it into an array , And the default is nullable That is, you can pass no parameters . then , When you want to continue delivering this ... Tagged parameters params when , Bear in mind ！ Bear in mind ！ Don't use the parameter of the method passed in ... The remaining parameter keywords are defined , Otherwise, it's equivalent to you putting params Array passed to a new array , Then you can only use parameters in the method body you pass in [0] Get the array passed in .
Some places don't understand ... How to use , Someone may define it as :   ...params:any[], But it was not passed on to it any[], Just a single variable , In fact, there is a problem , According to my understanding, there is a problem , It is reasonable to report an error , If the user puts params[0] Used as an array , But what we actually get is a single variable such as int. It must be wrong .

ts + js + vscode + git It's almost out of the sky ~

5、 ... and 、JSON jsonObj turn string problem

Map<key,value> Unable to successfully transfer string It must be rewritten as {  [key]=value }  Form can be successfully transformed string
for example ：

let json : any = {};
for(let key of map.keys()){
     json[key] = map.get(key);   
}
JSON.stringify(json, null, 1);  Output complete dictionary json character string （ Back 2 Parameters are used to show the indented json)