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

运行结果如下：