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

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

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

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

npm install --save-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文件时，都会自动编译成JavaScript文件。

要配置自动编译，首先确保你已经安装了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     }   ] }

保存

.vscode/tasks.json

文件。现在，每次你保存TypeScript文件时，VSCode都会自动编译它。你可以在VSCode的“输出”面板中查看编译结果。

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

tsc

命令。