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

运行结果如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39111074/article/details/131825544