TypeScript
WebStorm 支持开发、运行与调试 TypeScript 源代码。 WebStorm 会识别 .ts 与 .tsx 文件，并在无需额外步骤的情况下为其编辑提供全面的编码辅助功能。 TypeScript 文件通过 
图标标记。
TypeScript 感知的编码辅助功能包括：关键字、标签、变量、参数与函数的 代码补全， 错误与语法高亮 、格式化、 多种代码检查与 快速修复 ，以及包含 TypeScript 特有内容在内的 常规重构。 WebStorm 还可 即时验证 TypeScript 代码 ，并在专属的 “问题”工具窗口中显示错误信息。
编译错误将在 TypeScript 工具窗口中报告。 详细信息请参见 将 TypeScript 编译为 JavaScript。
创建新应用
WebStorm 可创建基本的 TypeScript 项目，帮助您以最小配置快速设立项目。 生成的项目包含一个 package.json 、一个 tsconfig.json 和一个 index .ts 文件，并附带 console.log() 欢迎消息。 您还可以生成一个示例 Web 应用程序。
默认情况下，WebStorm 会自动创建一个 Git 仓库，并 将生成的源代码置于 Git 管理之下。
从现有 TypeScript 应用开始
如果您打算继续开发一个已有的 TypeScript 应用程序，只需在 WebStorm 中打开它即可。 可选地 下载所需的 npm 依赖项。
打开本机上的应用源代码
在 欢迎 屏幕上点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择存储源代码的文件夹。
从版本控制中检出应用源代码
在 欢迎 屏幕上点击 克隆存储库克隆。
或者，从主菜单中选择 、 或 。
在主菜单中，您可能会看到与项目关联的其他版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择版本控制系统，并指定用于检出应用源代码的仓库。 有关更多信息，请参阅 检出项目（克隆）。
项目安全性
当您打开在 WebStorm 外部创建并导入其中的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何处理包含不熟悉源代码的项目。
请选择以下选项之一：
安全模式下预览 ：在这种情况下，WebStorm 会以预览模式打开项目。 这意味着您可以浏览项目源代码，但无法运行任务和 script，也无法运行或调试项目。
WebStorm 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接以加载项目。
信任项目 ：在这种情况下，WebStorm 会打开并加载项目。 这意味着项目已初始化、插件已解析、依赖项已添加，WebStorm 的所有功能均可用。
不打开 ：在这种情况下，WebStorm 不会打开该项目。
详细了解请参阅 项目安全性。
验证 TypeScript
WebStorm 主要根据 TypeScript Language Service 的数据验证 TypeScript 代码，该服务也会将 TypeScript 编译为 JavaScript。
当前文件中检测到的错误描述及其快速修复建议可通过编辑器及 文件 选项卡中的 “问题”工具窗口获取。
整个项目中的错误及其快速修复建议会在 项目错误 选项卡的 问题 工具窗口中显示。 要打开工具窗口，请点击编辑器右上角的 检查 小部件：
有关更多信息，请参阅 在编辑器中查看问题并应用快速修复和 “问题”工具窗口。
验证当前文件中的 TypeScript
在编辑器中，将鼠标悬停在高亮显示的问题上。 WebStorm 会显示一个包含问题描述的工具提示。
应用建议的快速修复，或点击 更多操作… 并从列表中选择相关修复操作。
或者打开 文件 选项卡，在 问题 工具窗口中 Alt+6 查看问题描述、应用快速修复、导航至错误发生的源代码片段，并在 编辑器预览 面板中修复，无需离开工具窗口。 了解更多内容请参阅 “问题”工具窗口。
在整个项目中验证 TypeScript
要打开 问题 工具窗口，请点击编辑器右上角的 检查 小部件。
或者，从主菜单中选择 ，或按 Alt+6。
打开 项目错误 选项卡，该选项卡显示整个项目中的错误，按检测到错误的文件分组显示错误消息。
在此，您可以查看问题描述、应用快速修复、导航至错误发生的源代码片段，并在 编辑器预览 面板中直接修复错误，无需离开工具窗口。 了解更多内容请参阅 “问题”工具窗口。
配置与 TypeScript 语言服务的集成
在大多数情况下，所有内容开箱即用，无需手动配置。 但如果您希望使用自定义 typescript 包，或向 TypeScript language service 传递某些 命令行参数 ，则可以自定义默认设置。
在 设置 对话框中（Ctrl+Alt+S ），转到 。
或者，点击 语言服务 小部件（位于 状态 栏），然后点击
。
打开 TypeScript 页面。
指定要使用的 Node.js 解释器。
如果选择 项目 别名，WebStorm 将自动使用 Node.js 页面上 Node 解释器 字段中的项目默认解释器。 在大多数情况下，WebStorm 会检测项目默认解释器并自动填写该字段。
您也可以选择其他已配置的本地或远程解释器，或单击
并配置一个新的解释器。如需了解详情，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows Subsystem for Linux 中使用 Node.js。
在 TypeScript 字段中，指定要使用的 TypeScript 版本（WebStorm 会显示当前选择的版本）。
默认情况下，使用项目 node_modules 文件夹中的
typescript包。内置： 选择此选项以使用 WebStorm 所附带的
typescript软件包，而不会尝试查找其他软件包。选择： 选择此选项以使用自定义的
typescript包，而不是 WebStorm 附带的包。 在打开的对话框中，选择相关包的路径。如果项目的包管理器是 Yarn 2 ，则必须使用通过 Yarn 2 安装的
typescript包。 在此情况下，默认选中了yarn:package.json:typescript。详细了解 npm 和 Yarn 中的包管理器。
请确保选择了 TypeScript 语言服务 复选框。 结果如下：
语法和错误高亮基于 TypeScript 语言服务的注解。
补全列表包含 TypeScript 语言服务的建议和 WebStorm 计算出的建议。
TypeScript 代码会被编译为 JavaScript。
使用下方控制项配置 TypeScript 语言服务的行为。
显示项目错误 — 默认已经选中该复选框，TypeScript 语言服务会检查整个项目中的代码。 被检测到的错误会在 项目错误 标签页的 问题工具窗口 中按文件归类显示。
为避免性能问题，请取消选中 显示项目错误 复选框，使 TypeScript 语言服务仅在打开文件时检查。 然后， 项目错误 标签页将仅列出已打开文件中检测到的错误。
显示建议 — 默认已选中此复选框，WebStorm 除了显示真实错误外，还会显示 TypeScript 语言服务检测到的潜在问题。
启用由服务驱动的类型引擎 — 选中此复选框可基于 TypeScript 编译器的数据评估符号类型。
默认情况下，该复选框处于未选中状态，因此类型评估、解析、代码检查及重构基于 WebStorm 内部 TypeScript 引擎中的类型信息。
此默认行为可能导致性能问题以及类型解析中的错误，因为 WebStorm 内部 TypeScript 引擎所使用的类型评估算法与 TypeScript 编译器的算法不同。 选中该复选框可帮助避免这些问题。
在 选项 字段中，指定当未找到 tsconfig.json 文件时传递给 TypeScript 语言服务的命令行选项。 请参阅 TSC arguments ，了解可接受的选项列表。 请注意，
-w或--watch（监视输入文件 ）选项无效。
重启 TypeScript 语言服务
单击 语言服务 小部件（位于 状态 栏）后，再单击
。
本地化错误消息
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
在 TypeScript 字段中，指定不同于 内置 的
typescript包。 该包可以是来自项目node_modules文件夹的typescript包，或任何其他位置的包。在 选项 字段中输入
--locale <abbreviation of the language to use>。 当前支持韩语（ko）和日语（ja）。
编辑 TypeScript 代码
WebStorm 为 TypeScript 提供智能编码辅助功能，包括 上下文感知代码补全、 符号自动导入、 文档查看、 参数提示、 导航、 TypeScript 感知语法高亮 和 代码检查、 重构 等功能。
自动导入
WebStorm 可为模块、类、组件及其他已导出的 TypeScript 符号生成 import 语句。 默认情况下，当您补全 TypeScript 符号时，WebStorm 会添加 import 语句。
请参阅 自动导入 ，了解如何优化 import 语句并配置其样式。
当您输入代码或粘贴包含尚未导入符号的片段时，WebStorm 也可以为该符号生成 import 语句。 如果导入符号的来源只有一个，WebStorm 会自动静默插入 import 语句。 否则，请使用 auto-import tooltip或 dedicated import quick-fix。
在代码补全时添加导入语句
在 设置 对话框（Ctrl+Alt+S ）中，转到 。 将打开 Auto Import页面。
在 TypeScript/JavaScript 区域，确保已选中 自动添加 TypeScript 导入 和 在代码补全时 复选框。
在输入或粘贴代码时添加导入语句
在 设置 对话框（Ctrl+Alt+S ）中，转到 。 将打开 Auto Import页面。
在 TypeScript/JavaScript 区域，确保已选中 自动添加TypeScript import 和 自动添加清晰导入 复选框。
使用自动导入工具提示
如果在补全或编辑时未添加 TypeScript 符号的 import 语句，WebStorm 会显示一个弹窗建议导入该符号。 要接受该建议，请按 Alt+Enter：
如果存在多个可能的导入来源，WebStorm 会告知您：
在此情况下按 Alt+Enter 会打开建议列表：
要隐藏 auto-import tooltip，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并取消选中 带有自动导入工具提示 复选框。
使用导入快速修复
如果未显示 auto-import tooltip，您可以随时按 Alt+Enter 并通过 quick-fix 添加 import 语句。
要生成 import，请选择 从以下位置插入导入：
如果导入符号的来源只有一个，WebStorm 会生成 import 语句：
如果存在多个导入来源，请从建议列表中选择相关来源：
如果项目中启用了 TypeScript 语言服务，您也可以使用其建议：
配置导入语句中 type 修饰符的使用
按 Ctrl+Alt+S 以打开设置，然后选择 。
切换到 导入 选项卡，并在 导入语句中使用 type 修饰符 字段中配置在类型的 import 语句中使用
type修饰符。 请注意，该设置仅适用于类型，无论选择哪个选项，对非类型都不会插入type修饰符。启用此选项时，如果在 tsconfig.json 中指定了 "importsNotUsedAsValues": "error"或 "verbatimModuleSyntax": true ，将添加
type修饰符。否则，如果未首选任何 import 类型，则不会插入
type修饰符。
启用此选项时，无论在 tsconfig .json 中是否指定了 "importsNotUsedAsValues": "error"或 "verbatimModuleSyntax": true ，都会始终插入
type修饰符：
启用此选项时，WebStorm 始终不会使用
type修饰符，而不考虑在 tsconfig.json 中是否设置了 "importsNotUsedAsValues": "error"或 "verbatimModuleSyntax": true标志：
如果已有带 type 修饰符的 import 语句，则后续导入类型时将始终使用该修饰符，而不考虑所选选项及 tsconfig.json 中的设置。
对于常量，将使用 {<constant name>} 说明符代替 type 修饰符。 对于 TypeScript 4.5 及更高版本，若选择了 自动 或 始终 ，则所有先前的修饰符将转换为 {type} 说明符。 否则，所有现有的说明符将保持不变。
请参阅 TypeScript 官方网站了解详情。
配置导入语句的外观
在 设置 对话框（Ctrl+Alt+S ）中，转到 ，并在 Import 选项卡中使用相关控件。 有关详细信息，请参阅 Imports 选项卡。
文档查找
WebStorm 可让您获取项目及其依赖项中的符号、外部库中定义的符号以及标准 JavaScript API 的引用，因为 TypeScript 实现了这些接口。
默认情况下，将在 文档 弹窗中显示文档，但您可以始终在 Documentation 工具窗口中打开它，甚至将其配置为默认显示在 文档工具窗口 中。
查看快速文档
将鼠标悬停在编辑器中所需的符号上。
或者，将光标置于该符号上，按 Ctrl+Q 或从主菜单中选择 。
要默认在 文档 工具窗口中打开快速文档，请在弹窗或工具窗口的工具栏中点击
，然后取消选中 首先显示文档弹出窗口 选项。在弹窗中点击
以更改字体大小、显示快速文档工具栏或转到源代码。有关详细信息，请参阅 配置快速文档弹窗。
您可以在工具窗口中打开特定代码元素的文档，并继续查看当前文件中其他元素的文档，如 在工具窗口中保留文档中所述。
在工具窗口中，代码文档显示在未钉住的标签中（该标签带有星号符号（*））。 您可以通过将鼠标悬停在符号上或将光标置于其上来查看此文档。 有关详细信息，请参阅 Quick Documentation 工具窗口：模式。
查看光标处符号的 MDN 文档
对于 TypeScript 中可用的标准 JavaScript 方法，WebStorm 还会显示指向相应 MDN 文章的链接。
在 文档 窗口 Ctrl+Q 中，点击 MDN 链接。
或者，按下 Shift+F1 或从主菜单中选择 。
WebStorm 会在 默认的 WebStorm 浏览器 中打开 MDN 文章。
查看内联提示
内嵌提示会显示在编辑器中，为您的代码提供额外信息，从而提升可读性和可导航性。
内嵌提示在 .ts 和 .tsx 文件中均可用。
如果启用了 TypeScript 语言服务且 TypeScript 版本为 4.4 或更高，内嵌提示将从 TypeScript 语言服务获取。
对于较低版本的 TypeScript，或禁用了 TypeScript 语言服务时，内嵌提示将从内部的 WebStorm 评估器获取。
与会分析整个文件的许多检查和高亮不同，提示仅针对当前可见区域检索，并在滚动时更新。 此行为旨在提升性能。
参数提示
参数提示会显示方法和函数中参数的名称，增强代码可读性。
在 TypeScript 版本 5.2 及更高版本中，参数提示在悬停时会变为链接。 按住 Ctrl 点击该链接将跳转到方法定义。
配置参数提示
打开 设置 对话框（Ctrl+Alt+S ），并转到 。
展开 TypeScript 下的 参数名称。
通过选择相应的复选框，指定要显示参数提示的上下文。
预览会显示您在设置中所做更改对代码外观的影响。
若要在任何上下文中隐藏任何值类型的参数提示，请取消选中 TypeScript 复选框（位于 参数名称 下）。
返回类型提示
WebStorm 可在函数调用和调用链中显示函数的返回类型。
函数返回类型提示由 TypeScript 语言服务 提供。
仅当方法调用拆分为多行并返回至少两种不同类型时，才会显示 方法链中的返回类型提示。
方法链中的返回类型提示由内部的 WebStorm 评估器提供。
配置函数返回类型提示
打开 设置 对话框（Ctrl+Alt+S ），并转到 。
在 类型 下，展开 TypeScript 节点，然后选中 函数返回类型 复选框。
要在方法链中显示返回类型提示，请展开 方法链 节点并选择 TypeScript 复选框。
预览会显示您在设置中所做更改对代码外观的影响。
类型提示
类型提示会显示变量、字段或参数的类型。 变量与字段的类型会显示在其定义旁边。 参数的类型提示会显示在函数调用中。 类型提示根据 JSDoc 注释 或代码的静态分析推断得出。
在 TypeScript 版本 5.3 及更高版本中，类型提示在悬停时会变为链接。 按住 Ctrl 点击该链接将跳转到类型定义。
配置类型提示
打开 设置 对话框（Ctrl+Alt+S ），并转到 。
展开 。
展开 类型注解 节点并指定要显示类型提示的上下文。
预览会显示您在设置中所做更改对代码外观的影响。
若要在任何上下文中隐藏任何值类型的参数类型和返回类型提示，请取消选中 TypeScript 复选框（位于 类型 下）。
数字枚举值
WebStorm 会为 数值枚举 显示提示，从而提升代码可读性。 这些提示由 TypeScript 语言服务提供，并默认显示。
隐藏数字枚举值
打开 设置 对话框（Ctrl+Alt+S ），并转到 。
展开 数值 节点并选中 TypeScript 复选框。 WebStorm 将隐藏提示，仅显示显式初始化常量的值。 预览会显示您在设置中所做更改对代码外观的影响。
TypeScript 中的 JavaScript 库
在 TypeScript 中使用 JavaScript 库时，您需要 安装类型声明。 WebStorm 会提醒您通过 npm 或 yarn 安装相关包，并相应地更新 package.json 文件。
安装类型声明
将光标置于警告处并按下 Alt+Enter。
选择建议项并按下 Enter。
TypeScript 原生预览（TypeScript-Go）
WebStorm 通过 TypeScript Native Previews 提供对 TypeScript-Go 的基础支持。
启用 TypeScript-Go 支持
在项目中将
@typescript/native-preview包作为依赖项安装，而非typescript包。为此，请打开 package.json 并将
typescript替换为@typescript/native-preview。 当悬停在@typescript/native-preview版本上时，WebStorm 会显示弹窗通知您未安装指定包。 点击 运行 'npm install' 链接。
在计算机的其他位置安装
@typescript/native-preview，并在您的项目中将其指定为要使用的 TypeScript 包。为此，请执行以下操作：
在您的计算机上安装
@typescript/native-preview包，例如执行全局安装。在嵌入的 终端 中（Alt+F12 ），输入：
npm install --g @typescript/native-preview在 设置 对话框中（Ctrl+Alt+S ），进入 ，并在 TypeScript 字段中指定
@typescript/native-preview包的路径。 如果按照标准安装流程操作，WebStorm 会在 TypeScript 下拉列表中显示@typescript /native-preview包。
在本地克隆并构建 TypeScript-Go 仓库 ，然后在 设置｜语言与框架｜TypeScript 对话框的 TypeScript 字段中定位到该仓库位置 ，如上所述。
重新格式化代码
WebStorm 允许您根据当前的 代码样式方案重新格式化 TypeScript 代码。
您也可以在 .editorconfig 中指定格式设置或使用 Prettier。
装饰器
对于装饰器，在重新格式化时抑制每个装饰器后自动换行可能很重要。
配置装饰器
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在 换行与大括号 选项卡中，为装饰器类型选择相关选项。
装饰器可用的格式化选项如下：
不换行
选中此选项时，重新格式化包含装饰器的行时不会应用换行。
过长时换行
选中此选项时，当行超出右边距时会自动换行。
右边距是在 在此处强制换行 字段中定义的，位于 设置 | 编辑器 | 代码样式 | JavaScript | 换行与大括号。 如果行超出指定数值，则会自动换行。
过长时拆分
选中此选项时，如果装饰器超过右边距，每行将格式化为一个装饰器。
始终换行
选中此选项时，所有装饰器都会被格式化为每行一个。
语法高亮
您可以根据自己的偏好和习惯配置对 TypeScript 语法的高亮显示设置。
在 设置 对话框（Ctrl+Alt+S ）中，前往 。
选择配色方案，接受从默认方案继承的高亮设置，或按 颜色和字体 中所述自定义设置。
代码导航
在 WebStorm 编辑器中，您可以使用不同的操作和弹出窗口快速浏览 TypeScript 项目。
转到符号声明
您可以从变量、字段、方法或任何其他符号导航到其声明，或 在弹出窗口中查看符号定义 ，而无需离开正在编辑的代码。
要跳转到符号的声明位置，请将光标置于符号的使用位置，然后按 Ctrl+B ，或从主菜单中选择 。
或者，使用 Ctrl+Click ：按住 Ctrl 并将鼠标悬停在符号上。 当符号变为超链接时，点击该超链接，同时请勿松开 Ctrl。
要在弹出窗口中查看符号定义，请将光标置于该符号的使用处并按 Ctrl+Shift+I ，或从主菜单中选择 。
转到符号用法
您可以查看符号的使用列表，并选择要跳转的位置。
要获取符号的使用列表，请将光标置于该符号的声明位置，并执行以下任一操作：
按 Ctrl+B ，或从主菜单中选择 。
按 Ctrl+Alt+F7 ，或从主菜单中选择 。
在弹出窗口中，请使用工具栏中的图标配置列表外观，并过滤掉无关的使用项，例如 import 语句中的使用。
在列表中，选择要跳转的符号使用项并按 Enter。
转到符号类型声明
您可以从变量、字段、方法或任何其他符号导航到其类型声明。 或者， 在弹出窗口中打开类型定义 ，而无需跳转到类型声明。
WebStorm 还会显示对象的 推断类型。 您可以在工具提示或文档弹出窗口中查看推断类型信息。
要从符号跳转到其类型的声明，请将光标置于符号的使用处，然后按 Ctrl+Shift+B ，或从主菜单中选择 。
要在弹出窗口中查看符号的类型定义，请将光标置于要查看类型定义的符号上并选择 。
对于类的实例，这将显示类本身，而不是该实例的定义位置。
请注意 与 之间的差异。 假设您有一个文件 app.ts ，其代码如下：
如果您将光标置于 dog 的 dog.bark() 中，则 会将您带到 let dog = new Dog () 中变量的声明，而 会将您带到类 Dog 的声明。
查看符号的推断类型信息
按住 Ctrl 并将鼠标悬停在符号上。
或者，将鼠标悬停在符号上。 WebStorm 会立即在 文档 弹出窗口中显示其引用信息。
请参阅上方 文档查询了解更多信息。
在子类、超类、重写项和实现之间导航
您可以通过编辑器中的边距图标或按快捷键来追踪类实现和重写方法。
转到子类
按 Ctrl+Alt+B ，或点击边距中的
，然后从列表中选择相关类。
或者，从主菜单中选择 ，或从上下文菜单中选择 ，然后从列表中选择相关类。
转到超类或被重写的方法
将光标置于子类上并按 Ctrl+U。 WebStorm 会将您带到超类的声明并将光标置于其类名上。
点击覆盖方法旁编辑器边距中的
。 WebStorm 会将您带到超类，并将光标置于被重写方法的位置。
或者，将光标置于重写方法上并按 Ctrl+U ，或从主菜单中选择 ，或从上下文菜单中选择 。
转到接口或已实现方法
将光标置于接口的实现方法上并按 Ctrl+U。
WebStorm 会将您带到接口的声明位置，并将光标置于其名称上。
点击实现方法旁编辑器边距中的
。 WebStorm 会将您带到对应的接口，并将光标置于被实现的方法上。
或者，将光标置于实现方法上并按 Ctrl+U ，或从主菜单中选择 ，或从上下文菜单中选择 。
TypeScript 中的重构
WebStorm 提供常用的重构操作，例如 rename/move 等，以及 TypeScript 专用的重构操作，例如 change signature、 introduce parameter、 introduce variable。 有关详细信息，请参阅 重构 TypeScript 和 重构 JavaScript。
运行并调试您的应用程序
使用 WebStorm，您可以运行并调试客户端 TypeScript 代码以及在 Node.js 中运行的 TypeScript 代码。 请参阅 Running and debugging TypeScript 了解更多信息。