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

安装typescript编译器需运行npm install -g typescript以支持tsc命令；2. 使用tsc --init生成tsconfig.json并配置compileroptions和include以定义编译行为和文件范围；3. vscode内置typescript支持，可安装官方插件增强体验；4. 编写typescript代码后运行tsc命令编译为javascript并输出到指定目录；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之后，就可以开始配置了。

解决方案

1. 安装TypeScript编译器: 全局安装TypeScript编译器是基础。打开你的终端，运行

   npm install -g typescript

   。这一步确保你可以在命令行中使用

   tsc

   命令。

2. 创建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

   指定了编译后的JavaScript版本，

   module

   指定了模块系统，

   outDir

   指定了输出目录，

   strict

   开启了严格模式，

   include

   指定了要编译的TypeScript文件。

3. 安装VSCode的TypeScript插件: VSCode自带了对TypeScript的支持，但安装官方的TypeScript插件可以提供更好的开发体验。在VSCode的扩展商店搜索“TypeScript”，安装Microsoft提供的TypeScript Language Basics。

4. 编写TypeScript代码: 在

   src

   目录下创建你的TypeScript文件，比如

   index.ts

   。写一些代码，比如：

   function greet(name: string) {
     console.log(`Hello, ${name}!`);
   }
   
   greet("World");

5. 编译TypeScript代码: 在终端中运行

   tsc

   命令，TypeScript编译器会根据

   tsconfig.json

   的配置，将

   src

   目录下的TypeScript文件编译成JavaScript文件，并输出到

   dist

   目录下。

6. 运行JavaScript代码: 使用Node.js运行编译后的JavaScript文件。在终端中运行

   node dist/index.js

   ，你应该能在控制台看到“Hello, World!”。

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

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

tsc

What-the-Diff

检查请求差异，自动生成更改描述

下载

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

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

npm install --save-dev typescript

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

include

exclude

include

exclude

一个常见的用法是，使用

include

src

exclude

node_modules

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

include

exclude

*

?

**

正确配置

include

exclude

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

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

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

tsconfig.json

Ctrl+Shift+B

Cmd+Shift+B

选择“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
    }
  ]
}

保存

.vscode/tasks.json

自动编译功能可以大大提高开发效率，让你专注于编写代码，而不用手动运行

tsc