VSCode中配置TypeScript自动编译

1. VSCode简介

Visual Studio Code（简称VSCode）是一款免费开源的源代码编辑器，由微软公司出品，支持Windows、macOS、Linux三大平台使用。它支持多种编程语言，例如：JavaScript、TypeScript、HTML、CSS等等。它的特色有：智能提示、智能调试、代码片段、版本控制、插件等等功能。在它强大的插件支持下，使用它开发变得更加高效便捷。

2. TypeScript简介

TypeScript是由微软推出的一种强类型的JavaScript超集语言。它支持ES6+的语法特性，同时也提供了类型检查、面向对象、接口、装饰器、泛型等特性的语言扩展。TypeScript最终会被编译成JavaScript代码，在浏览器中运行。

3. 配置TypeScript自动编译

3.1 安装Node.js

Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它是一个事件驱动、非阻塞I/O模型的服务器端平台。在TypeScript编译过程中，需要使用到Node.js中的tsc命令，所以在使用TypeScript之前，需要先安装Node.js。

可以在官网 https://nodejs.org/en/ 下载安装Node.js。

3.2 初始化项目

使用npm初始化项目，创建package.json文件，其中包括所需的依赖库。

npm init

3.3 安装TypeScript

使用npm安装TypeScript到本地。

npm install typescript --save-dev

其中，--save-dev表示把TypeScript安装到devDependencies，这是因为TypeScript在开发和上线过程中都是作为开发依赖使用，而不是部署的必要依赖。

3.4 配置tsconfig.json文件

tsconfig.json文件是TypeScript编译器的配置文件，它包含了一些编译选项和编译的源文件。

在项目根目录下创建tsconfig.json文件，并添加如下代码：

{

  "compilerOptions": {
    "target": "es5", // 编译JavaScript的目标版本
    "module": "commonjs", // 输出的JavaScript模块类型
    "outDir": "dist", // 编译成JavaScript文件的输出目录
    "strict": true, // 开启所有严格类型检查选项
    "esModuleInterop": true // 支持使用ES6的导入导出语法
  },
  "include": ["src/**/*"], // 编译的源文件目录
  "exclude": ["node_modules"] // 排除的目录
}

3.5 配置VSCode任务（task）

在VSCode中配置自动化任务（task），可以在代码变化时自动编译TypeScript代码。

使用快捷键Ctrl+Shift+B打开任务面板，选择Create tasks.json file from template，之后选择Others，VSCode会创建一个默认的任务文件.vscode/tasks.json。

修改此文件的tasks属性为如下代码：

"tasks": [

  {
    "type": "typescript",
    "tsconfig": "tsconfig.json",
    "problemMatcher": [
      "$tsc"
    ],
    "group": {
      "kind": "build",
      "isDefault": true
    }
  }
]

3.6 配置Watcher

在前面的步骤中，我们已经设置了任务，但需要手动触发执行。在此基础上，我们可以设置VSCode的Watcher，实现代码变动时自动编译TypeScript。

使用快捷键Ctrl+Shift+P，输入Open Workspace Settings，选择Workbench Settings: Open Workspace Settings，之后在打开的settings.json文件中添加以下配置：

"watcher": {

  "tasks": [
    "typescript"
  ],
  "files": [
    "**/*.ts"
  ]
}

以上设置表示，当项目中任何以.ts结尾的文件变动时，自动执行typescript任务。

3.7 测试

完成以上步骤后，可以修改一个.ts文件，保存后自动编译成.js文件，输出到dist目录下。

4. 总结

配置TypeScript自动编译是非常简单的，只需要安装Node.js，初始化项目，安装TypeScript，配置tsconfig.json文件，添加VSCode任务和Watcher即可。这使得开发过程中无需频繁进行手动重启和编译操作，提高开发效率。

在实际项目中，除了自动编译外，还可以加入其他自动化工具，如Webpack，实现更加高效的开发过程。