VS Code 中 TypeScript 开发配置与调试完整指南

TypeScript 项目模式与配置

TypeScript 作为 JavaScript 的超集，提供了类、模块和接口等特性，有助于构建结构更清晰、功能更强大的组件。

在 VS Code 中，TypeScript 支持两种不同的运行模式：

文件范围模式：在此模式下，VS Code 将打开的 TypeScript 文件视为独立单元。如果文件 A.ts 未通过 /// 引用指令或模块导入显式引用文件 b.ts，则这两个文件之间不存在共享的项目上下文。

显式项目模式：TypeScript 项目通过 tsconfig.json 文件进行定义。该文件指定了 TypeScript 项目的根目录，列出了属于该项目的文件以及编译选项。有关 tsconfig.json 的更多细节可参考相关文档。

建议：推荐使用显式项目模式而非文件范围模式。由于显式项目模式列出了属于项目的全部文件，因此像“查找所有引用”（Shift+F12）等功能仅考虑项目范围，而非单个文件范围，从而提供更准确的导航体验。

tsconfig.json 配置

通常，创建新项目的第一步是添加一个 tsconfig.json 文件。它定义了 TypeScript 项目的设置，包括编译选项和包含的文件列表。

操作方法：打开你希望存储资源的文件夹，并在其中添加一个名为 tsconfig.json 的文件。添加后，智能感知功能即可生效。

以下是一个 tsconfig.json 示例，展示了如何配置 ES5 目标、CommonJS 模块以及 Source Map 生成。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  }
}

现在，当你将 .ts 文件作为项目的一部分创建时，VS Code 会提供丰富的编辑体验和语法验证功能。

TypeScript 编译与构建任务

将 TypeScript 转换为 JavaScript

VS Code 通过任务运行器与 tsc 集成。我们可以利用该工具将 TypeScript 文件转换为 JavaScript 文件。接下来我们将浏览一个简单的 TypeScript Hello World 程序示例。

步骤 1：创建简单的 TypeScript 文件

在空文件夹中打开 VS Code，然后创建一个 helloworld.ts 文件，将以下代码替换到文件中。

class Startup {
  public static main(): number {
    console.log('Hello World');
    return 0;
  }
}

Startup.main();

步骤 2：创建 task.json 配置文件

第一步是建立任务配置。使用 Ctrl+Shift+P 打开命令调色板，然后输入 configure task Runner，按回车键选择。

这将显示一个带有模板的选择框。

选择 typescript-tsconfig.json 选项。这将在工作区的 .vscode 文件夹中创建一个 tasks.json 文件。

生成的 task.json 文件内容如下所示：

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0",
  "command": "tsc",
  "isShellCommand": true,
  "args": ["-p", "."],
  "showOutput": "silent",
  "problemMatcher": "$tsc"
}

提示：虽然模板可以帮助生成通用配置设置，但智能提示同样适用于 task.json 文件。使用 Ctrl+Space 可以查看可用的设置选项。

在后台，我们让 tsc 作为一个外部任务运行器，它仅暴露一个任务：将 TypeScript 编译为 JavaScript 文件。执行的命令是：tsc -p .

提示：如果你尚未安装 TypeScript 编译器，可以点击相关链接进行安装。

步骤 3：运行构建任务

由于这是文件中唯一的任务，你可以执行它，方法是通过按 Ctrl+Shift+B（运行构建任务）。与此同时，你将在文件列表中看到一个额外的 helloworld.js 文件。

如果该 TypeScript 文件没有任何编译问题，则会创建 helloworld.js 和 helloworld.js.map 文件。

如果已安装 Node.js，你可以通过打开终端并运行以下命令来运行你的 Hello World 示例。

node HelloWorld.js

提示：你也可以使用 VS Code 的运行/调试特性来运行此程序。关于在 VS Code 中运行和调试 Node 应用的更多细节，请查阅相关文档。

步骤 4：回顾构建问题

不幸的是，大多数构建过程并不顺利，结果通常带有额外的信息。例如，如果 TypeScript 文件中存在错误，你可能会从 tsc 得到如下输出：

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

这将显示在输出窗口中（可以使用 Ctrl+Shift+U 打开），系统会为你解析此输出，并在任务栏中高亮显示该问题。

你可以点击那个图标，获取问题列表并定位具体问题。

你也可以使用快捷键 Ctrl+Shift+M 打开问题列表。

提示：任务为许多丰富的行为提供支持。有关如何配置它们的更多信息，请查看“任务”相关话题。

代码导航、格式化与 JSDoc

跳转标记与展示所有标记

Ctrl+Shift+O：列出当前打开文件中所有定义的符号，并允许你在其中进行导航。

Ctrl+T：让你搜索当前项目中或文件范围内所有定义的标记。你需要在编辑器中打开一个 TypeScript 文件。

格式化代码

Shift+Alt+F：格式化整个文档。Ctrl+K Ctrl+F：格式化当前选择的代码区域。

JSDoc 支持

VS Code 提供了对 TypeScript 中 JSDoc 的支持。除了语法着色外，我们还会帮助你输入 JSDoc 注释。输入 /** 将自动插入结束符 */。在 JSDoc 块中输入回车将缩进下一行并自动插入 *。

调试配置与文件管理

JavaScript Source Map 支持

TypeScript 调试支持 JavaScript Source Map。在项目运行配置文件 launch.json 中将 sourceMaps 设为 true。此外，你可以指定一个 TypeScript 文件使用 program 属性。

要生成 TypeScript 文件的 Source Maps，请使用 --sourcemap 选项进行编译，或将 tsconfig.json 文件中的 sourcemap 属性设置为 true。也支持行内 Source Map（内容存储在 URL 中而不是单独的文件），虽然目前尚未支持行内 Source Map。

为生成文件设置不同的 outFiles

如果生成的（已折叠的）JavaScript 文件不在其源文件旁边，你可以通过在 launch 配置中的 outfiles 属性帮助 VS Code 调试器定位它们。

无论何时在源代码中设置断点，VS Code 都会尝试通过在 outfiles 中 glob 模式指定的文件查找生成的资源。

隐藏生成的 JavaScript 文件

当你使用 TypeScript 时，通常不希望看到资源管理器或搜索结果中显示生成的 JavaScript 文件。VS Code 提供了过滤器功能，即 files.exclude 工作区设置（文件 -> 引用 -> 设置）。你可以创建一个表达式来隐藏这些生成的文件。

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

此模式将匹配任何 JavaScript 文件（**/*.js），但仅当存在同名 TypeScript 文件时生效。如果编辑位置相同，文件管理器将不再展示生成的 JavaScript 资源。

若要排除从 .ts 和 .tsx 资源文件生成的 JavaScript 文件，请使用以下表达式：

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

这是一个小技巧，搜索 glob 模式是关键。上述设置使用两种不同的 glob 模式来提供两个唯一键，但搜索结果相同。

混合项目与版本管理

混合 TypeScript 和 JavaScript 项目

现在可以拥有混杂的 TS 和 JS 项目。为了让 JavaScript 存在于 TypeScript 项目中，你可以在 tsconfig.json 中将 allowJs 属性设置为 true。

提示：tsc 编译器不会自动检测 jsconfig.json 文件的存在。使用 -p 参数让 tsc 使用你的 jsconfig.json 文件。例如：tsc -p jsconfig.json。

使用新版本的 TypeScript

VS Code 附带了最近稳定版本的 TypeScript 语言服务，它可能与安装在当前计算机和工作区的 TypeScript 版本不匹配。当你浏览一个 TS 或 JS 文件时，TypeScript 当前有效版本会显示在状态栏上。

当 VS Code 检测到 tsc 版本与活动的 TypeScript 语言服务版本不同时，会显示一条消息：“version mismatch! global tsc(2.1.5)!=vscode's language service(2.2.1).inconsistent compiler errors might occur”。这条消息是友好的，旨在提醒用户编译器与活动的语言服务可能存在差异。

你可以使用工作区设置 typescript.check.tscVersion 隐藏此检查。如果你点击了详细广告条中的“不再检查”，会设置你的用户设置 fasle。

 "typescript.check.tscVersion": false

其他选项是在你的工作区中安装匹配的 TypeScript 版本（npm install --save-dev typscript），或者在当前电脑全局安装（npm install -g typescript）。我们建议本地安装 TypeScript，从而避免与其他 TypeScript 项目交互问题。

提示：要得到指定版本的 TS，使用 @version。例如 TS2.2.1，你将使用 npm install --save-dev typescript@2.2.1。想要预览下一版本的 TS，运行 npm install --save-dev typescript@next。

当 VS Code 在后续编译版本中更新 TypeScript 语言服务时，你可能再次看到不匹配的消息，提示你更新你的 TypeScript 版本。

若要默认使用不同版本的 TypeScript，在你的用户设置中配置 typescript.tsdk，指出一个包含 tsserver.js 文件的目录。你可以使用 npm list -g typescript 命令找到 TypeScript 安装位置。tsserver.js 文件通常在 lib 文件夹中。

例如：

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

如果你的工作区有一个特殊的 TypeScript 版本，你能在工作区的 TS 版本和 VS Code 默认使用的版本之间切换。方法是在工作区中打开 TypeScript 或 JS 文件，然后单击状态栏中的 TypeScript 版本号。一个消息框将会出现，询问你要使用哪个版本的 TS 代码。

切换 TS 版本或改变 typescript.tsdk 文件之后，必须重启 VS Code 才会生效。你能切换回 VS Code 附带的 TS 版本。

TypeScript 扩展

VS Code 提供了许多 TypeScript 开箱即用的特性。除了内置内容外，你可以安装扩展以实现更强大的功能。

原文地址：https://code.visualstudio.com/Docs/languages/typescript

到此这篇关于用 VS Code 编辑 TypeScript 的实现方法的文章就介绍到这了，更多相关 VS Code 编辑 TypeScript 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！