【原创】vscode编写typescript自动编译以及名称冲突问题

在VS中配置自动编译功能

安装node

https://nodejs.org/en/download/

安装vscode

https://code.visualstudio.com/

创建工作文件夹

比如，E:\Frida\

启动vscode

最简单的方式，进入命令行，切换到E:\Frida
输入 code点，启动vscode，同时信任该文件夹

E:
cd E:\Frida
Frida>code .

创建ts文件

添加一个index.ts文件

创建该文件后，系统将自动初始化typescript环境

运行ts程序

点击运行 --> 启动调试 --> 选择"Node.js"
点击“运行和调试”，继续调试执行

点击“创建launch.json文件”，选择"Node.js"，将创建的文件保持默认，保存关闭。
再次运行（按F5）

安装typescript支持组件

在vs中按ctrl+`(ESC下面的那个键)，打开内置终端
在里面输入

npm install typescript -g

创建package.json文件

在vs中按ctrl+`(ESC下面的那个键)，打开内置终端
在里面输入

npm init

然后一路回车

创建tsconfig.json文件

在vs中按ctrl+`(ESC下面的那个键)，打开内置终端
在里面输入

tsc.cmd --init

将创建一个 tsconfig.json配置文件

修改配置文件

在vs中点击tsconfig.json，开始编辑

设置如下内容生效：

"rootDir": "./",
"outDir": "./js/",

这里注意 outDir，换个目录，不要和rootDir相同，否则编译时会出现问题。
其他保持默认

设置自动编译

请在管理员权限下运行powershell指令

Set-ExecutionPolicy -ExecutionPolicy Unrestricted

点击终端 --> 运行任务 --> 选择 typescript --> 选择“tsc：监视 - tsconfig.json”
到这里，系统会自动对ts文件进行编译。

解决名冲突

编译之后的js文件会与原来的ts文件有名称冲突，导致ts文件中报错。
两种解决办法：
1 在ts源代码顶部添加一行

export { };

原理：使用export将文件声明为一个模块module，变量被限制在当前模块作用域下，因此ts文件与js文件之间不会再产生名称冲突的问题。

2 不修改代码
不要在编辑器中打开js文件，就不出错啦

代码自动格式化

点击文件->首选项->“设置”。
搜索“格式化”

在用户区中，点击“文本编辑器”->“格式化”
按照需要勾选：
Editor:Format on Paste
Editor:Format On Save
Editor:Format On Type
现在，编辑器都可以自动格式化代码了