Typescript environment construction and ts file debugging method

1. Install typescript globally

Open the cmd window and execute the command:

npm install typescript -g

# 或者以下简写方式安装
npm i typescript -g

After the installation is complete, you can execute the command to view the typescript installation version

tsc -v

If the installation is successful, you can see the installed version number:

insert image description here

2. Debug ts file method 1 (compile first and then execute)

Create a new folder locally to store typescript files, hereinafter referred to as "ts"

Create a new ts file, such as "index.ts":
insert image description here
Run the ts file to view the print results Method:

1. Compile the ts file into a js file

① Method of compiling a single ts file

Excuting an order:

tsc ts文件名 --watch

# 或者简写形式
tsc ts文件名 -w

This is to compile a specified ts file, which will compile the specified ts file into a corresponding js file

For example:

tsc index.ts -w

After executing the command, the "ndex.ts" file will generate the corresponding js file "ndex.js", as shown in the figure:
insert image description here

② Method of compiling multiple ts files

First generate the "tsconfig.json" file, and then execute the command "tsc -w"
so that you don't need to specify the file name, you can directly generate js files, and you can compile all ts files into corresponding js files

Generate "tsconfig.json" file method:
Execute the command:

tsc --init

After executing the command, the "tsconfig.json" file is generated, as shown in the figure:

insert image description here

Tip: When writing ts code, an error message appears as follows:

insert image description here
Put the mouse on the error position, and the error message will appear as follows:
insert image description here
After adding — “export {}”, the error message will disappear

insert image description here

2. Run the js file

Note: After using "tsc -w" above to compile the ts file into a js file, do not close the monitoring window opened by this command, so that every time the ts file is modified, the corresponding js file will be updated in time

Run the js file and execute the command:

node js文件名

as the picture shows:
insert image description here

3. Directly run the ts file method

1. Install "ts-node" globally
2. Execute the command "npm init -y" to generate a "package.json" file
3. Install the node declaration file - - - "npm i @types/node -D"
4. Run the ts file and output the result - - - "ts-node ts file name"

Open cmd, enter the command to install:

npm i ts-node -g

Go to the folder where the ts file is located, and execute the command to generate a "package.json" file:

npm init -y

Install the node declaration file:

npm i @types/node -D

After installation, as shown in the figure:
insert image description here

Then you can directly execute the ts file to view the output:
eg:

ts-node index.ts

The result of the operation is as follows:
insert image description here

Guess you like

Origin blog.csdn.net/qq_39111074/article/details/131825544