VSCode 配置插件

本节课我们来开始了解 TypeScript 中开发中 VSCode 配置和插件安装。

一．VSCode 配置

1. 打开 VSCode 开发工具，打开创建好的 TS 目录创建 01/01.ts，随便写点代码；

console.log('Hello TS~') //如何执行这段代码呢？

2. Ctrl+J 打开编辑器的终端，选择 cmd(一般默认)，通过命令将.ts 编译成.js；

tsc 01/01.ts //这样会在同一目录生成编译后的 01.js

3. 得到了.js 文件，我们可以直接在终端使用命令执行；

node 01/01.js
PS：此时，当我们继续修改.ts 文件时，还需要再次进行命令行编译生成，太麻烦了；

4. 如果想要 VSCode 保存修改.ts 文件时，自动更新或生成.js 文件，需要设置；
5. 我们在根目录下使用命令生成一个 tsconfig.json 配置文件，方便使用；

tsc --init

6. 有了 tsconfig.json 配置文件后，我们选择菜单栏“终端”->“运行任务”；
7. 选择配置任务“typescript”->tsc 监视 -- tsconfig.json 即可；
8. 此时，将会在当前目录自动生成对应的.js 文件，而处于监视中，不被每次运行；
9. 当然，编辑器退出后，再次编码，还需要自行启动一次，如果想更改生成位置；

"outDir": "./build/", //更改生成的位置

10. 虽然解决了，时时更新.js 文件不必再命令行执行，但还是需要通过 node 运行 js；

node 01/01.js
PS：此时会想，可不可以不那么麻烦，直接去运行.ts 文件呢？
node 01/01.ts //也能运行

11. 第一个插件，解决懒人问题，不管是执行.ts 还是执行.js，不想打命令；

Code Runner //直接点击运行按钮，或右击 run code
PS：貌似不支持.ts 文件，会出现乱码，可以安装 ts-node 替换；

12. 可以通过安装 ts-node，来直接运行.ts 文件，但原理还是内部生成了.js 并运行；
 

npm install -g ts-node //安装 ts-node
ts-node 01/01.ts
PS：而这个时候，其实没有.js 文件生成的，但建议生成一下，对比 js 文件学习较好；