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

记录初次学习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热更新一样，监视代码状态。