尝试以扩展 VS Code 中的代理模式!

Visual Studio Code 中的 TypeScript

TypeScript 是 JavaScript 的一个类型化超集,可编译成纯 JavaScript。它提供了类、模块和接口,帮助您构建健壮的组件。

Working with TypeScript in Visual Studio Code

安装 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

另一种选择是在您的项目中本地安装 TypeScript 编译器 (npm install --save-dev typescript),这样做的好处是可以避免与您可能拥有的其他 TypeScript 项目发生潜在冲突。

Hello World

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

mkdir HelloWorld
cd HelloWorld
code .

在文件资源管理器中,创建一个名为 helloworld.ts 的新文件。

create new file

现在添加以下 TypeScript 代码。您会注意到 TypeScript 关键字 letstring 类型声明。

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

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

compiled hello world

如果您已安装 Node.js,可以运行 node helloworld.js

run hello world

如果您打开 helloworld.js,您会发现它与 helloworld.ts 没有太大区别。类型信息已被移除,let 现在变成了 var

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

IntelliSense

IntelliSense 为您提供智能代码补全、悬停信息和签名帮助,以便您更快速、更正确地编写代码。

TypeScript small completions for String type

VS Code 为单个 TypeScript 文件以及 TypeScript tsconfig.json 项目提供 IntelliSense。

悬停信息

将鼠标悬停在 TypeScript 符号上,可快速查看其类型信息和相关文档。

Hover for a lodash function

您也可以使用键盘快捷键 ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 在当前光标位置显示悬停信息。

签名帮助

当您编写 TypeScript 函数调用时,VS Code 会显示有关函数签名信息,并高亮显示您当前正在补全的参数。

Signature help for the lodash capitalize function

当您在函数调用中输入 (, 时,会自动显示签名帮助。使用 ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) 手动触发签名帮助。

代码片段

除了智能代码补全,VS Code 还包含基本的 TypeScript 代码片段,它们会在您键入时被建议。

TypeScript 'for' snippet suggestions

您可以安装扩展以获取额外的代码片段,或为 TypeScript 定义自己的代码片段。有关更多信息,请参阅用户定义代码片段

提示:您可以通过将设置文件中的 editor.snippetSuggestions 设置为 "none" 来禁用代码片段。如果您希望看到代码片段,可以指定其相对于建议的顺序:在顶部 ("top")、在底部 ("bottom") 或按字母顺序内联 ("inline")。默认值为 "inline"

错误和警告

TypeScript 语言服务将分析您的程序中的编码问题,并报告错误和警告。

  • 在状态栏中,有所有错误和警告计数的摘要。
  • 您可以点击摘要或按下 ⇧⌘M (Windows, Linux Ctrl+Shift+M),以显示包含所有当前错误的问题面板。
  • 如果您打开一个包含错误或警告的文件,它们将与文本内联显示,并在概览标尺中呈现。

Error in the editor and Problems panel

要循环查看当前文件中的错误或警告,您可以按下 F8⇧F8 (Windows, Linux Shift+F8),这将显示一个内联区域,详细说明问题和可能的代码操作(如果可用)。

Error inline in the editor

代码导航

代码导航允许您快速浏览 TypeScript 项目。

  • 转到定义 F12 - 转到符号定义的源代码。
  • 查看定义 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 调出“查看”窗口,显示符号的定义。
  • 转到引用 ⇧F12 (Windows, Linux Shift+F12) - 显示符号的所有引用。
  • 转到类型定义 - 转到定义符号的类型。对于类的实例,这将显示类本身,而不是实例的定义位置。
  • 转到实现 ⌘F12 (Windows, Linux Ctrl+F12) - 转到接口或抽象方法的实现。

您可以使用命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的转到符号命令通过符号搜索进行导航。

  • 转到文件中的符号 ⇧⌘O (Windows, Linux Ctrl+Shift+O)
  • 转到工作区中的符号 ⌘T (Windows, Linux Ctrl+T)

格式化

VS Code 包含一个 TypeScript 格式化程序,它提供具有合理默认设置的基本代码格式化功能。

使用 typescript.format.* 设置来配置内置格式化程序,例如让大括号出现在独立行上。或者,如果内置格式化程序妨碍了您,请将 "typescript.format.enable" 设置为 false 以禁用它。

对于更专业的代码格式化样式,请尝试从 VS Code Marketplace 安装一个格式化扩展。

重构

VS Code 包含一些方便的 TypeScript 重构功能,例如提取函数提取常量。只需选择您想要提取的源代码,然后点击边槽中的灯泡图标或按下 (⌘. (Windows, Linux Ctrl+.)) 即可查看可用的重构。

TypeScript refactoring

有关重构以及如何为单个重构配置键盘快捷键的更多信息,请参阅重构 TypeScript

重命名

最简单的重构之一是重命名方法或变量。按下 F2 可在您的 TypeScript 项目中重命名光标下的符号。

Renaming a method

调试

VS Code 为 TypeScript 提供了出色的调试支持,包括对源映射的支持。您可以在调试控制台中设置断点、检查对象、导航调用堆栈并执行代码。有关更多信息,请参阅调试 TypeScript 和总体调试主题

调试客户端代码

您可以使用浏览器调试器调试客户端代码,例如内置的 Edge 和 Chrome 调试器,或 Firefox 调试器

调试服务器端代码

在 VS Code 中使用内置调试器调试 Node.js。设置简单,并且有一个Node.js 调试教程可以帮助您。

debug data inspection

代码检查器

代码检查器为可疑代码提供警告。虽然 VS Code 不包含内置的 TypeScript 代码检查器,但 TypeScript 代码检查器扩展可在 Marketplace 中获取。

ESLint 是一款流行的代码检查器,它也支持 TypeScript。ESLint 扩展将 ESLint 集成到 VS Code 中,因此您可以直接在编辑器中看到代码检查错误,甚至可以通过快速修复快速解决其中许多错误。ESLint 插件指南详细说明了如何为您的 TypeScript 项目配置 ESLint。

TypeScript 扩展

VS Code 开箱即用,为 TypeScript 提供了许多功能。除了内置功能外,您还可以安装扩展以获得更强大的功能。

提示:点击上方的扩展磁贴以阅读描述和评论,从而决定哪个扩展最适合您。在Marketplace中查看更多信息。

后续步骤

要了解更多信息,请参阅:

常见问题

我可以使用随 VS 2022 提供的 TypeScript 版本吗?

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

如何在 VS Code 中使用最新的 TypeScript 测试版?

在 VS Code 中试用最新 TypeScript 功能最简单的方法是安装JavaScript and TypeScript Nightly 扩展

您也可以配置 VS Code 以使用特定的 TypeScript 版本