编译 TypeScript

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

安装TypeScript编译器

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

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

npm install -g typescript

您可以测试您的安装，方法是查看版本或帮助。

类型检查编译器 --版本
类型检查编译器 --帮助

另一个选项是将TypeScript编译器安装在你的项目中npm install --save-dev typescript) 并且避免与其他可能存在的 TypeScript 项目发生潜在的冲突。

编译器与语言服务

重要的是要记住，VS Code 的 TypeScript 语言服务与您安装的 TypeScript 编译器是分开的。当您打开一个 TypeScript 文件时，可以在语言状态栏项目中看到 VS Code 的 TypeScript 版本。

在文章的后面，我们将讨论如何更改 VS Code 使用的 TypeScript 语言服务版本。

tsconfig.json

通常在任何新的TypeScript项目中的第一步是添加一个tsconfig.json文件。Atsconfig.json 文件定义了 TypeScript 项目设置，例如编译选项和应包含的文件。为此，请打开您希望存储源代码的文件夹，并添加一个名为 的新文件tsconfig.json一旦进入此文件，IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) 将一路帮助你。

一个简单的tsconfig.json 对于 ES5 看起来是这样的，CommonJS 模块和源映射：

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

现在，当你创建一个输入：.ts将文件作为项目的一部分，我们将提供丰富的编辑体验和语法验证。

将 TypeScript 编译成 JavaScript

VS Code 集成于翻译结果：tsc通过我们集成的任务运行器。我们可以使用它来编译输入：.ts文件到.js 文件。使用 VS Code 任务的另一个好处是，您可以在 问题 面板中看到集成的错误和警告检测。让我们一起编译一个简单的 TypeScript Hello World 程序。

步骤 1：创建一个简单的 TS 文件

在空文件夹中打开 VS Code 并创建一个helloworld.ts文件，将以下代码放在该文件中...

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

测试你是否拥有TypeScript编译器翻译结果：tsc正确安装并创建一个运行的Hello World程序后，打开终端并输入tsc helloworld.ts你可以在 VS Code 中直接使用集成终端 (⌃` (Windows, Linux Ctrl+`))。

您现在应该看到编译后的helloworld.jsJavaScript 文件，如果您已安装 Node.js，可以通过输入 节点 helloworld.js输入：.

步骤 2：运行 TypeScript 构建

执行运行构建任务 (⇧⌘B (Windows, Linux Ctrl+Shift+B)) 从全局 终端 菜单。如果你创建了一个 tsconfig.json在前面的部分中，这应该呈现以下选择器：

选择 tsc: build 条目。这将生成一个 HelloWorld.js和HelloWorld.js.map工作区中的文件。

如果您选择了tsc: watch，TypeScript 编译器将监视您的 TypeScript 文件的更改，并在每次更改时运行编译器。

在幕后，我们运行TypeScript编译器作为任务。我们使用的命令是：tsc -p .

步骤 3: 将 TypeScript 构建设置为默认

您还可以将 TypeScript 构建任务定义为默认构建任务，以便在触发 运行构建任务 时直接执行 (⇧⌘B (Windows, Linux Ctrl+Shift+B))。要这样做，请从全局 配置默认构建任务 菜单中选择 终端。这将显示一个带有可用构建任务的选择器。选择 TypeScript tsc: build，它将生成以下 任务.json文件在.vscode文件夹:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

请注意该任务有一个组设置任务的JSON对象孩子至构建 并将其设置为默认。现在，当你选择 运行构建任务 命令或按 (⇧⌘B (Windows, Linux Ctrl+Shift+B))，你将不会被提示选择任务，编译将开始。

提示： 您也可以使用 VS Code 的运行/调试功能来运行该程序。有关在 VS Code 中运行和调试 Node.js 应用程序的详细信息，请参阅 Node.js 教程

步骤 4：审查构建问题

VS Code 任务系统还可以通过问题匹配器检测构建问题。问题匹配器根据特定的构建工具解析构建输出，并提供集成的问题显示和导航。VS Code 随附了许多问题匹配器和$时间戳见上文任务.json是用于TypeScript编译器输出的问题匹配器。

例如，如果有这样一个简单的错误（在中多了一个 'g'控制台日志在我们的TypeScript文件中，我们可能会得到以下输出翻译结果：tsc输入：

HelloWorld.ts(3,17): 错误 TS2339: 属性 'logg' 在类型 'Console' 上不存在。

这将显示在终端面板 (⌃` (Windows, Linux Ctrl+`)) 并在终端视图下拉菜单中选择任务 - 构建 tsconfig.json。

您可以在状态栏中看到错误和警告的计数。单击错误和警告图标以获取问题列表并导航到这些问题。

你也可以使用键盘打开列表⇧⌘M（Windows, Linux Ctrl+Shift+M）。

提示： 任务为许多操作提供了丰富的支持。请查看 任务 主题以获取有关如何配置它们的更多信息。

JavaScript 源映射支持

TypeScript 调试支持 JavaScript 源映射。要为您的 TypeScript 文件生成源映射，请使用以下命令编译：--源映射选项或设置源映射物业在tsconfig.json文件到真输入：.

内联源映射（将内容存储为数据URL而不是单独文件的源映射）也受到支持，尽管内联源尚未受到支持。

生成文件的输出位置

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

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

隐藏派生的JavaScript文件

当您在使用 TypeScript 时，通常不希望在文件资源管理器或搜索结果中看到生成的 JavaScript 文件。VS Code 提供了过滤功能，可以使用 文件排除 工作区设置 你可以轻松创建一个表达式来隐藏这些派生文件：

**/*.js: { "when": "$(basename).ts" }

此模式将匹配任何JavaScript文件 (**/*.js) 但只有在存在同名的兄弟TypeScript文件时才有效。如果JavaScript文件编译到相同位置，文件资源管理器将不再显示派生资源。

添加文件排除在工作区中使用过滤器设置settings.json文件，位于.vscode工作区根目录下的文件夹。您可以打开工作区settings.json 通过 首选项：打开工作区设置 (JSON) 命令从命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。

排除从两者生成的JavaScript文件输入：.ts和.tsx源文件，使用此表达式：

"files.exclude": {
    "**/*.js": { "when": "$(basename).ts" },
    "**/**.js": { "when": "$(basename).tsx" }
}

这有点像是一个技巧。搜索通配符模式被用作键。上面的设置使用了两种不同的通配符模式来提供两个唯一的键，但搜索仍然会匹配相同的文件。

使用更新的 TypeScript 版本

VS Code 预装了最新稳定的 TypeScript 语言服务，并默认使用该服务在你的工作区中提供代码智能提示（IntelliSense）。工作区中的 TypeScript 版本与你用来编译代码的 TypeScript 版本无关。*.ts文件。对于大多数常见情况，你可以放心地使用 VS Code 内置的 TypeScript 版本来实现代码补全，但有时你可能需要更改 VS Code 用于代码补全的 TypeScript 版本。

进行此操作的原因包括：

• 尝试最新的TypeScript功能，通过切换到TypeScript夜间构建版本typescript@下一次)。
• 确保你用于IntelliSense的TypeScript版本与你用于编译代码的版本相同。

当您将版本号固定到语言状态栏并查看TypeScript文件时，可以在状态栏中显示活动的TypeScript版本及其安装位置：

如果您想更改工作区中TypeScript的默认版本，有几种选择：

使用工作区版本的 TypeScript

如果您的工作区有特定的 TypeScript 版本，您可以通过打开一个 TypeScript 或 JavaScript 文件并在状态栏中点击 TypeScript 版本号来在工作区的 TypeScript 版本和 VS Code 默认使用的版本之间切换。会出现一个消息框，询问您希望 VS Code 使用哪个版本的 TypeScript：

使用此功能在 VS Code 提供的 TypeScript 版本和工作区中的 TypeScript 版本之间切换。您也可以通过命令 TypeScript: 选择 TypeScript 版本 来触发 TypeScript 版本选择器。

VS Code将自动检测在以下位置安装的workspace版本的TypeScript节点模块在你的工作区根目录下。你也可以通过配置明确告诉 VS Code 使用哪个版本的 TypeScript。typescript.tsdk 在你的用户或工作区 设置中。 typescript.tsdk设置应指向包含TypeScript的目录tsserver.js文件。你可以使用 找到 TypeScript 的安装位置。npm 列出 -g typescript。tsserver.js文件通常在库文件夹。

例如：

{
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

提示： 要获取特定的 TypeScript 版本，请指定 @版本在npm install期间。例如，对于TypeScript 3.6.0，你会使用npm install --save-dev typescript@3.6.0要预览下一个版本的TypeScript，请运行npm install --save-dev typescript@next输入：.

请注意，虽然typescript.tsdk指向库目录在类型脚本在这些例子中，类型脚本目录必须是完整的TypeScript安装，包含TypeScriptpackage.json文件。

你也可以通过在特定工作区中添加一个特定版本的TypeScript来告诉VS Code使用特定版本的TypeScript。typescript.tsdk工作区设置指向目录tsserver.js文件:

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

该typescript.tsdk 工作区设置仅告诉 VS Code 工作区版本的 TypeScript 存在。要实际上开始使用工作区版本的 IntelliSense，必须运行 TypeScript: 选择 TypeScript 版本 命令并选择工作区版本。

使用 TypeScript 夜间构建版本

在 VS Code 中尝试最新的 TypeScript 功能的最简单方法是安装 JavaScript 和 TypeScript 夜ly 版扩展。

此扩展会自动将 VS Code 内置的 TypeScript 版本替换为最新的 TypeScript 夜间构建版本。只需确保你切换回使用 VS Code 的 TypeScript 版本，如果你已经使用“TypeScript：选择 TypeScript 版本”命令配置了你的 TypeScript 版本。

混合TypeScript和JavaScript项目

可以在TypeScript和JavaScript混合的项目中使用JavaScript。要在TypeScript项目中启用JavaScript，可以设置允许JavaScript属性到真在tsconfig.json输入：.

提示： 翻译结果：tsc编译器无法检测到一个jsconfig.json文件将自动保存。使用–p要争论的点翻译结果：tsc使用你的jsconfig.json文件，例如tsc -p jsconfig.json输入：.

处理大型项目

如果你在一个包含数百或数千个TypeScript文件的代码库中工作，这里有一些步骤可以帮助你改善VS Code中的编辑体验以及命令行上的编译时间。

确保你的 tsconfig 只包含你关心的文件

使用包含或文件在你的项目中tsconfig.json确保项目仅包含应属于项目的所有文件。

更多信息关于配置您的项目tsconfig.json输入：.

使用项目引用拆分您的项目

与其将源代码结构化为一个大型项目，不如通过使用项目引用将其拆分为多个较小的项目来提高性能。这使TypeScript可以一次加载代码库的一部分，而不是加载全部。

请参阅 TypeScript 文档，了解有关如何使用项目引用及其最佳实践的详细信息。

下一步

继续阅读，了解：

• 编辑 TypeScript - TypeScript 的特定编辑功能。
• 重构 TypeScript - TypeScript 语言服务中有用的重构。
• 调试 TypeScript - 配置你的 TypeScript 项目的调试器。

常见问题

如何解决 TypeScript "无法编译外部模块" 错误？

如果你遇到这个错误，通过创建一个来解决它tsconfig.json 项目根文件夹中的文件。tsconfig.json 文件允许您控制 Visual Studio Code 如何编译您的 TypeScript 代码。有关更多信息，请参阅 tsconfig.json 概述。

为什么我在 VS Code 中得到的错误和警告与编译我的 TypeScript 项目时不同？

VS Code 配备了最近的稳定版本的 TypeScript 语言服务，这可能与您计算机上全局安装的或工作区中本地安装的 TypeScript 版本不匹配。因此，您可能会看到编译器输出和活动的 TypeScript 语言服务检测到的错误之间的差异。有关详细信息，请参阅 使用较新版本的 TypeScript 安装匹配的 TypeScript 版本。

我可以使用 VS 2022 附带的 TypeScript 版本吗？

不，Visual Studio 2019 和 2022 随附的 TypeScript 语言服务与 VS Code 不兼容。您需要从 npm 安装单独的 TypeScript 版本。

为什么一些错误被报告为警告？

默认情况下，VS Code TypeScript 将代码样式问题显示为警告而不是错误。这适用于：

• 变量已声明但从未使用
• 属性已声明，但其值从未被读取
• 检测到无法到达的代码
• 未使用的标签
• 在 switch 语句中发生的情况
• 并非所有代码路径都返回一个值

将这些视为警告与TSLint等其他工具一致。即使在运行时，这些仍然会显示为错误。翻译结果：tsc从命令行。

您可以通过设置禁用此行为"typescript.reportStyleChecksAsWarnings": false 在你的用户 设置。