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、安装 node 声明文件 - – -“npm i @types/node -D”
4、运行 ts 文件，输出结果 – – –“ts-node ts 文件名”

打开 cmd，输入命令，进行安装：

npm i ts-node -g

到 ts 文件所在文件夹下，执行命令，生成“package.json”文件：

npm init -y

安装 node 声明文件：

npm i @types/node -D

安装后，如图所示：

然后就可以直接执行 ts 文件，查看输出结果了：
eg:

ts-node index.ts

运行结果如下：