初学Typescript——vscode自动编译ts文件

7,164 阅读2分钟

记录初次学习Typescript过程中收获到的小技巧。

刚开始学习Typescript时,都会需要在命令行输入命令去编译.ts文件为.js文件才能正常测试自己写的ts代码是否有效,现在有了vscode的自动编译功能,不需要输入命令操作了,只需要保存.ts文件,vscode自动编译为.js文件了。

当然,想在vscode上运行.js文件进行测试也是有插件(Code Runner),如下图。


言归正传

第一步:在目标文件夹生成 tsconfig.json 文件

首先打开目标文件夹,打开cmd,输入命令:

tsc --init

生成的 tsconfig.json文件如下图:

第二步:修改 tsconfig.json 文件

首先在目标文件夹中新建一个文件夹(js),存放vscode编译出来的文件;其次,在 tsconfig.json 文件中找到 “outDir”,并且修改其值为刚刚新建的文件夹路径

"outDir": "./js"

如图所示:


第三步:打开vscode终端运行typescript任务

首先,在vscode菜单栏找到“终端”,点击“运行任务”;其次搜索“typescript”,并点击;

此时会出现两个选项,第二个选项是我们所需要监视,如下图


点击“tsc: 监视 - tsconfig.json”,此时,会弹出一个终端,监视该文件夹中所有的ts文件是否被修改保存或新建,如果有,则编译出对应的js文件;否则一直监视着。


最后,可以在该文件夹内愉快地写ts代码,学习typescript了。

测试HelloWorld

ts文件:

js文件:

总结

这个小技巧只是作为我之后学习typescript的铺垫,写代码的时候就不用去运行命令编译,自动化编译即可。这就好像我学过的Vue热更新一样,监视代码状态。