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，可以全局安装 TypeScript （-g） 在你的电脑上通过：

npm install -g typescript

你可以通过查看版本来测试安装。

tsc --version

你好，世界

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

mkdir HelloWorld
cd HelloWorld
code .

从文件资源管理器中创建一个名为helloworld.ts.

现在添加以下TypeScript代码。你会注意到TypeScript关键词设以及弦类型声明。

let message: string = 'Hello World';
console.log(message);

要编译你的 TypeScript 代码，你可以打开集成终端（⌃'（Windows，Linux Ctrl+'））并输入TSC的 helloworld.ts.这会编译并创建新的helloworld.jsJavaScript文件。

如果你安装了Node.js，就可以运行了节点 helloworld.js.

如果你开门helloworld.js你会发现它看起来和实际情况差别不大helloworld.ts.类型信息已被删除，且设现在是VAR.

var message = 'Hello World';
console.log(message);

IntelliSense

在 VS Code 中，你可以看到语言功能，比如语法高亮和括号匹配。当你在编辑器中输入时，你可能注意到了IntelliSense、VS Code提供的智能代码补全和建议，以及TypeScript语言服务器。下面你可以看到 的方法控制台

当你选择方法时，会得到参数帮助，并且总能获得悬停信息。

tsconfig.json

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

重要提示：使用tsconfig.json接下来的教程，请 InvokeTSC没有输入文件。TypeScript编译器知道查看你的tsconfig.json用于项目设置和编译器选项。

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

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

编辑时tsconfig.jsonIntelliSense（Windows，Linux Ctrl+Space）将帮助你。

默认情况下，TypeScript 包含所有.ts当前文件夹和子文件夹中的文件如果文件属性不包含，所以我们不需要列出helloworld.ts明确地说。

更改构建输出

将生成的JavaScript文件放在与TypeScript源代码相同的文件夹中，在大型项目中会很快变得杂乱，所以你可以用出导属性。

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

删除helloworld.js并执行命令TSC没有选择。你会看到的helloworld.js现在被置于出去目录。

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

错误检查

TypeScript 通过强类型检查帮助你避免常见的编程错误。例如，如果你将一个数字分配到信息TypeScript编译器会抱怨“错误TS2322：类型'2'无法分配给类型'string'。你可以在VS Code中看到类型检查错误，无论是在编辑器（红色波浪线带有悬停信息）还是问题面板（⇧⌘M（Windows，Linux Ctrl+Shift+M））中。该[时间]前缀会告诉你这个错误来自TypeScript语言服务。

快速修复

TypeScript 语言服务拥有一套强大的诊断工具，用于发现常见的编码问题。例如，它可以分析你的源代码，检测到编辑器中显示为调暗的不可访问代码。如果你将鼠标悬停在源代码行上，会看到一个解释功能;如果你把光标放在代码上，就会弹出快速修复的灯泡。

点击灯泡或按⌘。（Windows，Linux Ctrl+）会弹出快速修复菜单，你可以选择“移除无法访问的代码修复”。

此外，代码动作小部件：包含附近的快速修复 (editor.codeActionWidget.includeNearbyQuickFixes）是默认启用的设置，会在⌘的一行内激活最近的快速修复。（Windows，Linux Ctrl+。）（命令IDeditor.action.quickFix），无论你的光标在该行的哪个位置。

该命令会高亮将被重构或通过快速修复修复的源代码。正常的代码作和非修复重构仍可在光标位置激活。

调试

VS Code 内置支持 TypeScript 调试。为了支持调试 TypeScript 与正在执行的 JavaScript 代码，VS Code 依赖调试器的源映射，将原始 TypeScript 源代码与运行中的 JavaScript 映射在一起。你可以在构建过程中通过设置创建源映射“sourceMap”：真在你的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”：真在你的tsconfig.jsonVS Code Node.js调试器无法将你的 TypeScript 源代码映射到正在运行的 JavaScript。打开源码映射，重建你的项目。