编译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
tsc --help

另一种选择是在你的项目本地安装 TypeScript 编译器（NPM install --save-dev typescript）并且可以避免与你可能遇到的其他TypeScript项目发生交互。

编译器与语言服务的区别

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

TypeScript版本显示在状态栏的语言状态中。

提示

你可以用Pin图标将TypeScript版本钉在状态栏。

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

tsconfig.json

通常，任何新的 TypeScript 项目的第一步都是添加一个tsconfig.json档案。Atsconfig.jsonfile 定义了 TypeScript 项目的设置，比如编译器选项和应包含的文件。要做到这一点，打开你想存放源代码的文件夹，添加一个名为tsconfig.json.进入该文件后，IntelliSense（⌃空格（Windows，Linux Ctrl+空格））将协助你。

tsconfig.json IntelliSense

一个简单的tsconfig.jsonES5、CommonJS 模块和源码映射看起来是这样：

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

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

Transpile TypeScript 到 JavaScript

VS Code 集成于TSC通过我们集成的任务管理工具。我们可以利用这个来转叠.ts文件变为.js文件。使用VS Code任务的另一个好处是，问题面板中会显示集成的错误和警告检测功能。让我们一起讲解如何转译一个简单的TypeScript Hello World程序。

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

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

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

测试时，你需要用 TypeScript 编译器TSC正确安装并运行 Hello World 程序后，打开终端并输入TSC的 helloworld.ts.你可以直接在VS Code中使用集成终端（⌃'（Windows，Linux Ctrl+'））。

你现在应该能看到转译出来的helloworld.jsJavaScript文件，如果你安装了Node.js，可以通过输入节点 helloworld.js.

建设并运行Hello World

步骤2：运行TypeScript构建

从全局终端菜单执行运行构建任务（⇧⌘B（Windows，Linux Ctrl+Shift+B））。如果你创建了一个tsconfig.json在前一部分，这里应该会显示以下选择器：

TypeScript 构建

选择tsc：建造条目。这将产生HelloWorld.js以及HelloWorld.js.map工作区中的文件。

如果你选择了 tsc： watch，TypeScript 编译器会监控你的 TypeScript 文件的变更，并在每次变更时运行转译器。

在被子里，我们把TypeScript编译器当作任务运行。我们使用的命令是：TSC -p 。

步骤3：将TypeScript Build设为默认

你也可以将 TypeScript 构建任务定义为默认构建任务，这样在触发运行构建任务（⇧⌘B（Windows，Linux Ctrl+Shift+B））时会直接执行。要做到这一点，请从全局终端菜单中选择配置默认构建任务。这会显示一个可选建造任务的选择器。选择TypeScript tsc： build，生成以下内容tasks.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 自带了许多问题匹配器，$tsc如上图所示tasks.json是TypeScript编译器输出的问题匹配器。

举个例子，如果出现一个简单的错误（多了个“g”）console.log在我们的TypeScript文件中，我们可能会得到以下输出TSC:

HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.

这会显示在终端面板（⌃'（Windows，Linux Ctrl+'）），并在终端视图下拉菜单中选择任务 - 构建tsconfig.json。

你可以在状态栏看到错误和警告计数。点击错误和警告图标可查看问题列表并导航。

状态栏错误

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

提示：任务为许多动作提供了丰富的支持。查看任务主题，了解更多配置方法。

JavaScript 源地图支持

TypeScript 调试支持 JavaScript 源映射。要为你的 TypeScript 文件生成源映射，请用--Sourcemap选项或设置来源地图财产在tsconfig.json文件确实如此.

也支持内嵌源地图（即内容以数据URL存储而非单独文件的源地图），尽管内嵌源尚未被支持。

生成文件的输出位置

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

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

隐藏派生JavaScript文件

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

**/*.js： {“when”： “$（basename）.ts” }

该模式在任何JavaScript文件中都会匹配（ **/*.js但只有当存在同名的兄弟 TypeScript 文件时才会被执行。如果 JavaScript 的衍生资源编译到相同位置，文件资源管理器将不再显示。

隐藏衍生资源

添加files.exclude工作区中的一个过滤器设置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版本来管理IntelliSense，但有时可能需要更改VS Code在IntelliSense中使用的TypeScript版本。

这样做的原因包括：

通过切换到TypeScript夜间构建来尝试最新的TypeScript功能（typescript@next).
确保你用的是和编译代码用的 TypeScript 版本相同的 IntelliSense。

当你通过查看 TypeScript 文件，将语言状态栏中的版本号钉顶时，激活的 TypeScript 版本及其安装位置可以显示在状态栏中：

TypeScript 状态栏版本

如果你想更改工作区中默认版本的TypeScript，有几个选项：

使用 TypeScript 的工作区版本

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

TypeScript 版本选择器

用这个工具在自带 VS Code 的 TypeScript 版本和工作区里的 TypeScript 版本之间切换。你也可以用 TypeScript： Select TypeScript 版本命令触发 TypeScript 版本选择器。

VS Code 会自动检测安装在 TypeScript 工作区的版本node_modules在你工作空间的根源。你也可以通过配置Typescript.tsdk在你的用户或工作区设置里。该Typescript.tsdk设置应指向包含TypeScript的目录tsserver.js档案。你可以用以下方式找到TypeScript安装位置NPM List -G Typescript.该tsserver.js文件通常在自由党文件夹。

例如：

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

提示：要获得特定的 TypeScript 版本，请指定@version在安装NPM期间。例如，对于TypeScript 3.6.0，你会使用NPM 安装 --save-dev typescript@3.6.0.要预览下一版本的TypeScript，请执行NPM 安装 --save-dev typescript@next.

注意Typescript.tsdk指向自由党目录打字稿在这些例子中，打字稿目录必须是包含TypeScript的完整TypeScript安装package.json档案。

你也可以通过添加一个Typescript.tsdk工作区设置指向tsserver.js文件：

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

该Typescript.tsdkworkspace 设置只告诉 VS Code TypeScript 存在工作区版本。要真正开始使用 IntelliSense 的工作区版本，您必须执行 TypeScript： Select TypeScript Version 命令并选择工作区版本。

使用 TypeScript 的夜间构建

尝试 VS Code 最新 TypeScript 功能最简单的方法是安装 JavaScript 和 TypeScript Nightly 扩展。

该扩展会自动用最新的 TypeScript 夜间构建替换 VS Code 内置的 TypeScript 版本。只要确保你用 TypeScript： Select TypeScript 命令配置了 TypeScript 版本，就切回 VS Code 的 TypeScript 版本。

混合TypeScript和JavaScript项目

TypeScript和JavaScript项目可以混合使用。要在TypeScript项目中启用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版本。

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

不，Visual Studio 2019和2022自带的TypeScript语言服务不兼容VS Code。你需要安装一个独立于 npm 版本的 TypeScript。

为什么有些错误会被报告为警告？

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

变量声明但从未被使用
属性被声明，但其值从未被读取
检测到无法访问的代码
未使用的标签
切换中的落差大写
并非所有代码路径都会返回一个值

将这些视为警告，与其他工具如TSLint是一致的。运行时这些错误仍会显示为错误TSC从命令行。

你可以通过设置来禁用这种行为“typescript.reportStyleChecksAsWarnings”： false在你的用户设置里。