在node中搭建TypeScript开发环境

谭伟
2023-12-01

一、安装

npm install -g typescript

二、使用tsc编译

index.ts文件

let test: string = "test";

通过tsc编译成index.js

tsc index.ts

编译后的index.js文件

var test = "test";

注意:
1.通过tsc默认编译成的js版本默认是es3版本
2.编译之后会发现原来的index.ts文件报错了,显示无法重复声明test,是因为如果代码中没有使用模块化语句(import、export),便认为该代码是全局执行的,编译后的index.js中声明了一个变量test,所以在index.ts又声明了一个test就会报错
3.tsc默认的运行环境为dom

三、配置ts

配置TypeScript需要创建一个tsconfig.json文件可以手动创建也可以通过tsc创建

tsc --init   // 创建tsconfig.json文件

配置项

  • target:编译后的js版本,默认是es3
  • module:编译后的模块化标准(commonjs/es6)
  • outDir:tsc默认把编译后的js放到和当前ts同个文件夹中,outDir用来设置编译后的js存放的文件夹
  • include:默认情况下tsc或编译当前文件夹和文件夹下所有子文件夹中的所有ts文件,include是用来指定编译文件的,指定之后tsc只会编译指定的文件夹下的ts文件
  • lib:默认的执行环境为dom,可以使用window,console这些,如果没有填写dom,使用这些就会报错,这时可以安装@types/node
    更多配置项
{
	"compilerOptions": {
		"target": "es5",
		"module": "commonjs",
		"outDir": "./dist",
		"lib": ["ES2016"]
	},
	"include": ["./src"],
}

注意:

使用了配置文件后编译ts文件后面就不能加上文件名,如果加上了文件名就会忽略配置文件

三、使用第三方库简化流程

  • ts-node:将ts代码在内存中完成编译,同时完成运行,不会再编译出js文件
  • nodemon:用于检测文件的变化,重新对ts进行编译

安装:

npm i -g ts-node nodemon

启动:

nodemon --watch src -e ts --exec ts-node src/index.ts

–watch src::表示只监听src下的文件
-e ts:表示只监听ts结尾的文件

 类似资料: