Detailed steps to build the TypeScript environment and deploy it to VSCode

Preface: If you want to build TypeScript , you need npm . If you want to have cnpm , you need a node environment. If you have all of them, then read on.

TypeScript environment construction

Step 1: Download Taobao mirror

First check whether you have successfully installed npm

It is not enough to have npm, you also need to download cnpm, the command is as follows (copy and paste directly):

npm install -g cnpm --registry=https://registry.npm.taobao.org

After downloading, it will appear like this.

Step 2: Download TypeScript

In the command window, enter (copy and paste directly):

npm install -g typescript

Download it like this.

Check the version number:

tsc -v

This way TS is completely ready.

Deploy to VSCode

First create a folder tsDemo,

Create a demo.ts file in the tsDemo folder and write the content. .
Next, jump to the tsDemo folder location in the command window.

Then you need to generate a tsconfig.json file at this location.
Just copy this command:

tsc --init

Then the tsconfig.json file will be generated in the tsDemo folder.

Modify tsconfig.json configuration

Drag the tsDemo folder to vsCode. , find tsconfig.json,
Remove the comment of the line I selected and save it.

Then select the ts file and click: Terminal => Run Build Task. Click tsc: monitor

Then a js folder will be generated in the terminal, which contains the js file compiled from the ts file.
It's done, give yourself a round of applause🎉🎉🎉

Possible errors

tsc: Unable to load file C:\Users\JMQ\AppData\Roaming\npm\tsc.ps1,
Because running scripts is prohibited on this system. For more information, see
about_Execution_Policies at https://go.microsoft.com/fwlink/?LinkID=135170.

Solution :

Run vscode as administrator.

Then enter in the terminal:

set-executionpolicy remotesigned

It won't report an error.

ps: Let's take a look at how vscode executes typescript files.

1. Execute the tsc xxx.ts command in the vscode console to convert it to xxx.js

2. Execute node xxx.ts to output the result

This is the end of this article about the detailed steps of setting up the TypeScript environment and deploying it to VSCode. For more information about setting up the TypeScript environment, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!