VSCode如何配置TypeScript开发环境 VSCode搭建TS项目的详细教程

技术教程
2025-08-06 14:08:01

安装typescript编译器需运行npm install -g typescript以支持tsc命令；2. 使用tsc --init生成tsconfig.json并配置compileroptions和include以定义编译行为和文件范围；3. vscode内置typescript支持，可安装官方插件增强体验；4. 编写typescript代码后运行tsc命令编译为j*ascript并输出到指定目录；5. 通过node dist/index.js运行编译后的文件；6. 解决vscode报错而命令行正常的问题需统一typescript版本，选择“use workspace version”并安装本地typescript；7. include指定要编译的文件如"src/*/"，exclude排除如"node_modules"以提升编译效率；8. 配置自动编译需创建tasks.json并添加"watch": true，使保存时自动触发编译任务，从而提升开发效率。

VSCode配置TypeScript开发环境其实不难，简单来说就是安装必要的插件，配置tsconfig.json，然后就可以愉快地写代码了。下面详细说说步骤，以及一些踩坑经验。

安装好VSCode之后，就可以开始配置了。

解决方案

安装TypeScript编译器: 全局安装TypeScript编译器是基础。打开你的终端，运行
```
npm install -g typescript
```
。这一步确保你可以在命令行中使用
```
tsc
```
命令。
创建tsconfig.json文件: 在你的项目根目录下，创建一个
```
tsconfig.json
```
文件。这个文件定义了TypeScript编译器的行为。你可以使用
```
tsc --init
```
命令快速生成一个默认的配置文件。当然，默认的配置可能需要根据你的项目进行调整。

一个基本的
```
tsconfig.json
```
可能看起来像这样：
```
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ]
}
```
这里，
```
target
```
指定了编译后的J*aScript版本，
```
module
```
指定了模块系统，
```
outDir
```
指定了输出目录，
```
strict
```
开启了严格模式，
```
include
```
指定了要编译的TypeScript文件。
安装VSCode的TypeScript插件: VSCode自带了对TypeScript的支持，但安装官方的TypeScript插件可以提供更好的开发体验。在VSCode的扩展商店搜索“TypeScript”，安装Microsoft提供的TypeScript Language Basics。
编写TypeScript代码: 在
```
src
```
目录下创建你的TypeScript文件，比如
```
index.ts
```
。写一些代码，比如：
```
function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
编译TypeScript代码: 在终端中运行
```
tsc
```
命令，TypeScript编译器会根据
```
tsconfig.json
```
的配置，将
```
src
```
目录下的TypeScript文件编译成J*aScript文件，并输出到
```
dist
```
目录下。
运行J*aScript代码: 使用Node.js运行编译后的J*aScript文件。在终端中运行
```
node dist/index.js
```
，你应该能在控制台看到“Hello, World!”。

如何解决VSCode中TypeScript编译报错但命令行可以编译的问题？

有时候，VSCode可能会报一些TypeScript的错误，但你在命令行中使用

tsc

命令却可以正常编译。这通常是由于VSCode使用的TypeScript版本和全局安装的TypeScript版本不一致导致的。

解决这个问题，首先确认VSCode使用的TypeScript版本。在VSCode中，打开一个TypeScript文件，点击右下角的TypeScript版本号，选择“Select TypeScript Version”。然后，选择“Use Workspace Version”。这会告诉VSCode使用项目中的TypeScript版本。

OpenGPT

给AI不同提示词，立即创建属于自己的ChatGPT应用程序

162 查看详情 OpenGPT

如果你的项目中没有安装TypeScript，可以使用

npm install --s*e-dev typescript

安装一个本地的TypeScript版本。安装完成后，再次选择“Use Workspace Version”，VSCode就会使用你项目中的TypeScript版本，通常可以解决编译报错的问题。

tsconfig.json中的include和exclude有什么区别？如何正确配置？

include

和

exclude

用于指定TypeScript编译器应该包含和排除的文件。

include

指定了要包含的文件或目录，

exclude

指定了要排除的文件或目录。

一个常见的用法是，使用

include

指定

src

目录下的所有TypeScript文件，使用

exclude

排除

node_modules

目录。例如：

{
  "compilerOptions": {
    // ...
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

include

和

exclude

可以使用通配符。

匹配任意字符（不包括目录分隔符），

匹配单个字符，

**

匹配任意深度的目录。

正确配置

include

和

exclude

可以提高编译速度，避免编译不必要的文件。

如何配置VSCode的自动编译功能？

VSCode可以配置自动编译功能，这样每次保存TypeScript文件时，都会自动编译成J*aScript文件。

要配置自动编译，首先确保你已经安装了TypeScript编译器，并且创建了

tsconfig.json

文件。然后，在VSCode中，按下

Ctrl+Shift+B

（或者

Cmd+Shift+B

），选择“Configure Task”。

选择“tsc: build - tsconfig.json”。这会创建一个

.vscode/tasks.json

文件，其中定义了一个编译任务。

修改

.vscode/tasks.json

文件，添加一个

"watch": true

属性：

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

保存