VSCode中配置TypeScript自动编译（vscode自动编译less）

在VSCode中配置TypeScript自动编译可以通过以下步骤完成：

1、安装Node.js和npm（Node包管理器）：

访问Node.js官网（https://nodejs.org/）下载并安装适合您操作系统的Node.js版本。

安装完成后，npm也会一并安装到您的计算机上。

2、打开VSCode：

启动Visual Studio Code编辑器。

3、安装TypeScript插件：

在VSCode侧边栏中点击扩展图标（四个方块组成的图标）。

在搜索框中输入"TypeScript"，找到并安装Microsoft提供的官方TypeScript插件。

4、创建或打开一个TypeScript项目：

使用VSCode的文件浏览器创建一个新文件夹作为您的项目目录。

在该项目目录中，可以创建一个tsconfig.json文件来配置TypeScript编译器选项，如果已经存在该文件，可以直接编辑它。

5、配置tsconfig.json文件：

打开tsconfig.json文件。

确保文件中有以下基本配置项：

```json

{

"compilerOptions": {

"target": "es6",

"module": "commonjs",

"outDir": "dist",

"strict": true,

"esModuleInterop": true

},

"include": ["src/**/*"],

"exclude": ["node_modules"]

}

```

target指定了编译后的JavaScript代码的目标版本，这里设置为"es6"表示使用最新的ECMAScript规范。

module指定了模块系统的类型，这里设置为"commonjs"表示使用CommonJS模块系统。

outDir指定了编译后生成的JavaScript文件的输出目录，这里设置为"dist"表示将编译后的文件输出到名为"dist"的文件夹中。

strict启用了严格的类型检查选项，确保为true以获得更好的类型安全性。

esModuleInterop允许从旧版ECMAScript模块导入语句中进行互操作，确保为true以支持这些导入语句。

include指定了需要编译的文件或文件夹的路径模式，这里使用了通配符**来匹配所有子文件夹中的文件，可以根据需要修改路径模式。

exclude指定了不需要编译的文件或文件夹的路径模式，这里排除了名为"node_modules"的文件夹，以避免编译Node.js模块时出现问题，可以根据需要添加其他排除模式。

6、安装TypeScript依赖：

在终端或命令提示符中进入项目目录。

运行以下命令来安装项目所需的TypeScript依赖：

```shell

npm install save @types/node @types/express @types/react @types/reactdom @types/jest @types/lodash @types/bodyparser @types/morgan @types/helmet @types/cors @types/dotenv @types/mongoose @types/passport @types/jsonwebtoken @types/bcrypt @types/validator @types/expressfileupload @types/multer @types/socket.io @types/googlemaps @types/stripe @types/firebase @types/nodemailer @types/axios @types/chai @types/mocha @types/sinon @types/jest savedev legacypeerdeps

```

上述命令将安装一系列常用的TypeScript类型定义包，以确保在使用这些库时能够获得正确的类型检查和智能提示功能，您可以根据实际需求选择安装哪些包。

7、配置自动编译任务：

在VSCode侧边栏中点击终端图标（默认显示为一个矩形块）。

在终端中运行以下命令来安装一个简单的任务运行器：

```shell

npm install savedev gulp typescript gulptypescript tscwatch gulpsourcemaps savedev legacypeerdeps

```

上述命令将安装Gulp任务运行器、TypeScript相关包以及一些辅助包，用于实现自动编译任务，您可以根据实际需求选择安装哪些包。

在项目根目录下创建一个名为gulpfile.js的文件，并添加以下内容：