Visual Studio Code 中的 TypeScript 教程
TypeScript 是 JavaScript 的一个类型化超集,可以编译为纯 JavaScript。它提供了类、模块和接口,帮助你构建健壮的组件。
安装 TypeScript 编译器
Visual Studio Code 包含 TypeScript 语言支持,但不包含 TypeScript 编译器 tsc
。你需要在全局或工作区中安装 TypeScript 编译器,以便将 TypeScript 源代码转译为 JavaScript (tsc HelloWorld.ts
)。
安装 TypeScript 最简单的方法是通过 npm,即 Node.js 包管理器。如果你已经安装了 npm,可以通过以下命令在你的计算机上全局安装 (-g
) TypeScript:
npm install -g typescript
你可以通过检查版本来测试安装是否成功。
tsc --version
Hello World
让我们从一个简单的 Hello World Node.js 示例开始。创建一个新文件夹 HelloWorld
并启动 VS Code。
mkdir HelloWorld
cd HelloWorld
code .
从文件资源管理器中,创建一个名为 helloworld.ts
的新文件。
现在添加以下 TypeScript 代码。你会注意到 TypeScript 的关键字 let
和 string
类型声明。
let message: string = 'Hello World';
console.log(message);
要编译你的 TypeScript 代码,你可以打开集成终端 (⌃` (Windows, Linux Ctrl+`)) 并输入 tsc helloworld.ts
。这将会编译并创建一个新的 helloworld.js
JavaScript 文件。
如果你安装了 Node.js,可以运行 node helloworld.js
。
如果你打开 helloworld.js
,你会发现它与 helloworld.ts
并没有太大区别。类型信息已被移除,let
变成了 var
。
var message = 'Hello World';
console.log(message);
IntelliSense
在 VS Code 中,你可以看到诸如语法高亮和括号匹配等语言特性。当你在编辑器中输入时,你可能已经注意到了 IntelliSense,这是 VS Code 和 TypeScript 语言服务器提供的智能代码补全和建议。下面你可以看到 console
的方法:
当你选择一个方法后,你会得到参数帮助,并且随时可以获得悬停信息。
tsconfig.json
到目前为止,在本教程中,你一直依赖 TypeScript 编译器的默认行为来编译 TypeScript 源代码。你可以通过添加一个 tsconfig.json
文件来修改 TypeScript 编译器选项,该文件定义了 TypeScript 项目设置,例如编译器选项和应包含的文件。
重要提示:要在本教程的其余部分使用 tsconfig.json
,请在调用 tsc
时不带输入文件。TypeScript 编译器知道查找你的 tsconfig.json
来获取项目设置和编译器选项。
添加一个简单的 tsconfig.json
,将选项设置为编译到 ES5 并使用 CommonJS 模块。
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS"
}
}
在编辑 tsconfig.json
时,IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) 会一路为你提供帮助。
默认情况下,如果未包含 files
属性,TypeScript 会包含当前文件夹及其子文件夹中的所有 .ts
文件,因此我们不需要显式列出 helloworld.ts
。
更改构建输出
将生成的 JavaScript 文件与 TypeScript 源文件放在同一个文件夹中,在较大的项目中会很快变得杂乱,因此你可以使用 outDir
属性为编译器指定输出目录。
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"outDir": "out"
}
}
删除 helloworld.js
并运行不带选项的命令 tsc
。你会看到 helloworld.js
现在被放置在 out
目录中。
请参阅编译 TypeScript,了解有关 TypeScript 语言服务的其他功能,以及如何使用任务直接从 VS Code 运行构建。
错误检查
TypeScript 通过强类型检查帮助你避免常见的编程错误。例如,如果你给 message
赋一个数字,TypeScript 编译器会报错:“error TS2322: Type '2' is not assignable to type 'string'” (错误 TS2322:类型“2”不可分配给类型“string”)。你可以在 VS Code 的编辑器(带有悬停信息的红色波浪线)和问题面板 (⇧⌘M (Windows, Linux Ctrl+Shift+M)) 中看到类型检查错误。[ts]
前缀让你知道这个错误来自 TypeScript 语言服务。
快速修复
TypeScript 语言服务拥有一套强大的诊断功能,可以发现常见的编码问题。例如,它可以分析你的源代码并检测无法访问的代码,这些代码在编辑器中会显示为灰色。如果你将鼠标悬停在源代码行上,你会看到一个解释性的悬停提示;如果将光标放在该行上,你会得到一个快速修复灯泡图标。
点击灯泡图标或按 ⌘. (Windows, Linux Ctrl+.) 会弹出快速修复菜单,你可以从中选择移除无法访问的代码的修复方案。
此外,代码操作小组件:包括附近的快速修复 (Code Action Widget: Include Nearby Quick Fixes) (editor.codeActionWidget.includeNearbyQuickFixes
) 是一个默认启用的设置,它会通过 ⌘. (Windows, Linux Ctrl+.) (命令 ID editor.action.quickFix
) 激活一行中最近的快速修复,无论你的光标在该行的哪个位置。
该命令会突出显示将通过快速修复进行重构或修复的源代码。普通代码操作和非修复重构仍可在光标位置激活。
调试
VS Code 内置了对 TypeScript 调试的支持。为了支持 TypeScript 调试与执行中的 JavaScript 代码相结合,VS Code 依赖源映射 (source maps),让调试器能够在原始 TypeScript 源代码和运行中的 JavaScript 之间进行映射。你可以在构建过程中通过在 tsconfig.json
中设置 "sourceMap": true
来创建源映射。
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"outDir": "out",
"sourceMap": true
}
}
通过运行 tsc
重新构建,你现在应该在 out
目录中看到一个与 helloworld.js
相邻的 helloworld.js.map
文件。
在编辑器中打开 helloworld.ts
,然后按 F5。如果你安装了其他调试器扩展,你需要从下拉菜单中选择 Node.js。
调试器将启动一个会话,运行你的代码,并在“调试控制台”面板中显示“Hello World”消息。
在 helloworld.ts
中,通过点击编辑器左侧的边栏来设置一个断点。如果断点设置成功,你会看到一个红色的圆圈。再次按 F5。当执行到断点时会停止,你将能够在运行和调试视图 (⇧⌘D (Windows, Linux Ctrl+Shift+D)) 中看到变量值和调用堆栈等调试信息。
请参阅调试 TypeScript,了解更多关于 VS Code 对 TypeScript 的内置调试支持,以及如何为你的项目场景配置调试器。
后续步骤
本教程是对使用 VS Code 进行 TypeScript 开发的快速介绍。继续阅读以了解更多关于使用 VS Code 的编译和调试功能来支持 TypeScript 的内容。
- 编译 TypeScript - 使用 VS Code 强大的任务系统来编译 TypeScript。
- 编辑 TypeScript - TypeScript 的特定编辑功能。
- 重构 TypeScript - TypeScript 语言服务提供的有用重构。
- 调试 TypeScript - 为您的 TypeScript 项目配置调试器。
常见问题
无法启动程序,因为找不到对应的 JavaScript
你很可能没有在 tsconfig.json
中设置 "sourceMap": true
,导致 VS Code Node.js 调试器无法将你的 TypeScript 源代码映射到正在运行的 JavaScript。请开启源映射并重新构建你的项目。