Note the tips you learned about Typescript for the first time.

When you first learned Typescript, you needed to type commands on the command line to compile.ts files as.js files. Now vscode automatically compiles.ts files as.js files.

Of course, if you want to run the.js file on vscode for testing, there are plug-ins (Code Runner), as shown below.



Get to the point

Step 1: Generate the tsconfig.json file in the target folder

First open the target folder, open CMD, and type:

tsc --initCopy the code

The generated tsconfig.json file looks like this:

Step 2: Modify the tsconfig.json file

Create a new folder (js) in the target folder to store vscode compiled files. Next, find “outDir” in the tsconfig.json file and change its value to the folder path you just created

"outDir": "./js"Copy the code

As shown in the figure:



Step 3: open the vscode terminal and run the typescript task

First, go to “terminal” in the vscode menu bar and click “run task”; Next, search for “typescript” and click;

There are two options, the second of which is what we need to monitor, as shown below



Click “TSC: monitor-tsconfig. json”, at this time, a terminal will pop up to monitor whether all ts files in this folder are modified, saved or created, if so, the corresponding JS files will be compiled; Otherwise they’re always watching.



Finally, you can have fun writing TS code and learning typescript in this folder.

Test the HelloWorld

Ts file:

Js file:

conclusion

This tip is just a way for me to learn typescript in the future, so I don’t have to run command compilations when I write code. This is like the Vue hot update I learned about, monitoring the code state.