Visual Studio Code 中的 TypeScript 教程

TypeScript 是一个带有类型检查的 JavaScript 超集，编译成普通的 JavaScript。它提供了类、模块和接口，帮助你构建强大的组件。

安装TypeScript编译器

Visual Studio Code 包含 TypeScript 语言支持，但不包含 TypeScript 编译器。翻译结果：tsc您需要全局或在工作区中安装TypeScript编译器，以将TypeScript源代码编译成JavaScripttsc HelloWorld.ts)。

安装TypeScript的最简单方法是通过npm，即Node.js包管理器。如果你已经安装了npm，你可以全局安装TypeScript（-克) 在您的计算机上通过：

npm install -g typescript

您可以通过检查版本来测试您的安装。

tsc --版本

Hello World

让我们从一个简单的 Hello World Node.js 示例开始。创建一个新文件夹Hello World并启动 VS Code。

创建目录 HelloWorld
切换目录 HelloWorld
代码 .

从文件资源管理器中，创建一个名为的新文件helloworld.ts输入：.

创建新文件

现在添加以下TypeScript代码。你会注意到TypeScript关键字让和字符串类型声明。

让 消息：字符串 = 'Hello World';
控制台.日志(消息);

要编译你的TypeScript代码，你可以打开集成终端 (⌃` (Windows, Linux Ctrl+`)) 并输入tsc helloworld.ts这将编译并创建一个新的helloworld.jsJavaScript 文件。

编译 Hello World

如果你已经安装了Node.js，你可以运行节点 helloworld.js输入：.

运行 Hello World

如果你打开helloworld.js你将会看到它看起来与...并没有什么不同。helloworld.ts类型信息已被移除，并且让现在是变量输入：.

变量 消息 = 'Hello World';
控制台.日志(消息);

智能感知

在 VS Code 中，你可以看到你得到了诸如语法高亮和括号匹配等语言特性。当你在编辑器中输入时，你可能会注意到 IntelliSense，VS Code 和 TypeScript 语言服务器提供的智能代码完成和建议。下面你可以看到方法的控制台

智能感知

当您选择一种方法时，您会获得参数帮助，并且始终可以获取悬停信息。

参数帮助

tsconfig.json

到目前为止，在这个教程中，你一直依赖TypeScript编译器的默认行为来编译你的TypeScript源代码。你可以通过添加一个来修改TypeScript编译器选项tsconfig.json 文件定义了 TypeScript 项目设置例如编译器选项和应包含的文件。

重要：使用tsconfig.json在本教程的其余部分，调用翻译结果：tsc没有输入文件。TypeScript 编译器知道要查看你的tsconfig.json用于项目设置和编译器选项。

添加一个简单的tsconfig.json 将选项设置为编译为 ES5 并使用 CommonJS 模块。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS"
  }
}

编辑时tsconfig.json，IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) 将在您的开发过程中提供帮助。

tsconfig.json 代码智能感知

默认情况下，TypeScript 包含所有的输入：.ts当前文件夹和子文件夹中的文件文件属性未包括，因此我们无需列出helloworld.ts明确地。

更改构建输出

将生成的JavaScript文件放在TypeScript源文件所在的同一文件夹中，在大型项目中很快就会变得混乱，因此你可以通过指定编译器的输出目录来避免这种情况。输出目录属性。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out"
  }
}

删除helloworld.js并运行命令翻译结果：tsc没有选项。你会看到helloworld.js现在被放置在输出目录。

参见编译 TypeScript以了解 TypeScript 语言服务的其他功能以及如何使用任务直接从 VS Code 运行您的构建。

错误检查

TypeScript 通过严格的类型检查帮助你避免常见的编程错误。例如，如果你将一个数字分配给消息，TypeScript 编译器会报错 'error TS2322: Type '2' is not assignable to type 'string'。你可以在 VS Code 中看到类型检查错误， both in the editor (red squiggles with hover information) 和 the Problems panel (⇧⌘M (Windows, Linux Ctrl+Shift+M))。The 输入：[ts]前缀告诉您此错误来自TypeScript语言服务。

类型错误

快速修复

TypeScript 语言服务具有一套强大的诊断功能，可以找到常见的编码问题。例如，它可以分析你的源代码并检测到无法到达的代码，这些代码在编辑器中显示为暗淡。如果你将鼠标悬停在源代码的行上，你会看到一个解释的悬停提示；如果你将光标放在该行上，你会得到一个快速修复的灯泡。

检测到无法到达的代码

点击灯泡或按⌘.（Windows, Linux Ctrl+.）弹出快速修复菜单，您可以选择移除无法到达的代码修复。

此外，代码操作小部件：包含附近的快速修复 (editor.codeActionWidget.includeNearbyQuickFixes) 是默认启用的设置，这将从 ⌘. 激活最近的快速修复 (Windows, Linux Ctrl+.) (命令 ID 编辑器操作快速修复)，无论你的光标在那行的哪个位置。

该命令会突出显示将被快速修复或优化的源代码。正常代码操作和非修复的优化仍然可以在光标位置激活。

调试

VS Code 内置了对 TypeScript 调试的支持。为了在执行 JavaScript 代码的同时支持对 TypeScript 进行调试，VS Code 依赖于源映射，以便调试器在原始 TypeScript 源代码和正在运行的 JavaScript 之间进行映射。您可以在构建时通过设置"sourceMap": true在你的tsconfig.json输入：.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

重建通过运行翻译结果：tsc现在你应该有一个helloworld.js.map在输出目录旁边helloworld.js输入：.

有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无法找到

你可能还没有设置"sourceMap": true在你的tsconfig.json并且 VS Code Node.js 调试器无法将您的 TypeScript 源代码映射到正在运行的 JavaScript。启用源映射并重新构建您的项目。