typescript环境搭建及ts文件调试方法

一、全局安装 typescript

打开cmd窗口,执行命令:

npm install typescript -g

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

安装完成后可以执行命令,查看 typescript 安装版本

tsc -v

安装成功的话,可以看到所安装的版本号:

여기에 이미지 설명 삽입

二、调试 ts 文件方法一(先编译后执行)

本地新建一个文件夹,用于存放 typescript 文件,后面简称 “ts”

新建一个 ts 文件,例如 “index.ts”:
여기에 이미지 설명 삽입
运行ts 文件,查看打印结果方法:

1、编译ts文件为 js文件

① 编译单个 ts 文件方法

执行命令:

tsc ts文件名 --watch

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

这种是编译指定的 某个ts 文件,会将指定 ts 文件编译成 对应 js 文件

例如:

tsc index.ts -w

执行命令后会 “ndex.ts” 文件生成对应 js 文件 “ndex.js” 文件,如图所示:
여기에 이미지 설명 삽입

② 编译多个 ts 文件方法

先生成 “tsconfig.json” 文件,然后 执行命令 “tsc -w”
这样就不用指定文件名,可以直接生成 js 文件,可以将所有 ts 文件都编译成对应 js 文件

生成 “tsconfig.json” 文件方法:
执行命令:

tsc --init

执行命令后,生成了 “tsconfig.json” 文件,如图所示:

여기에 이미지 설명 삽입

提示:编写 ts 代码时,出现了报错提示如下:

여기에 이미지 설명 삽입
鼠标放到报错位置,出现报错提示如下:
여기에 이미지 설명 삽입
添加 — “export {}” 后,报错消失

여기에 이미지 설명 삽입

2、运行 js 文件

注意: 上面使用 “tsc -w”编译 ts 文件为 js 文件后,不要关闭该命令开启的监听窗口,这样每次修改 ts 文件后,对应的 js 文件都会及时更新

运行js 文件,执行命令:

node js文件名

如图所示:
여기에 이미지 설명 삽입

三、直接运行 ts 文件方法

1. "ts-node"를 전체적으로 설치합니다.
2. "npm init -y" 명령을 실행하여 "package.json" 파일을 생성합니다.
3. 노드 선언 파일을 설치합니다. - - - "npm i @types/node -D"
4. ts 파일을 실행하고 결과를 출력합니다. - - - "ts-node ts file name"

cmd를 열고 다음 명령을 입력하여 설치하십시오.

npm i ts-node -g

ts 파일이 있는 폴더로 이동하고 명령을 실행하여 "package.json" 파일을 생성합니다.

npm init -y

노드 선언 파일을 설치합니다.

npm i @types/node -D

설치 후 그림과 같이
여기에 이미지 설명 삽입

그런 다음 ts 파일을 직접 실행하여 출력을 볼 수 있습니다.
예:

ts-node index.ts

작업 결과는 다음과 같습니다.
여기에 이미지 설명 삽입

Supongo que te gusta

Origin blog.csdn.net/qq_39111074/article/details/131825544
Recomendado
Clasificación