JetBrains Rider 2025.2 Help

语言和框架:TypeScript

JetBrains Rider 支持开发、运行和调试 TypeScript 源代码。 JetBrains Rider 识别 .ts .tsx 文件,并为编辑它们提供全面的代码辅助,而无需您采取任何额外步骤。 TypeScript 文件以 TypeScript 文件 图标标记。

TypeScript 智能编码辅助包括关键字、标签、变量、参数和函数的 代码补全错误和语法高亮 、格式化、 大量代码检查快速修复 ,以及 常见和 TypeScript 特定的重构。 JetBrains Rider 还会 即时验证 TypeScript 代码并在专用 问题工具窗口中显示错误。

编译错误会在 TypeScript tool window中报告。 了解更多信息,请参阅 Compiling TypeScript into JavaScript

开始之前

  • 请确保在设置中启用 JavaScript 和 TypeScript 插件。 按 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,键入 JavaScript and TypeScript。 有关插件的更多信息,请参阅 插件管理

验证 TypeScript

JetBrains Rider 主要基于 TypeScript Language Service 的数据验证 TypeScript 代码,同时也将 TypeScript 编译成 JavaScript。

编辑器中提供了当前文件中检测到的错误描述及其快速修复。

检查小部件

验证当前文件中的 TypeScript

  • 在编辑器中,将鼠标悬停在突出显示的问题上。 JetBrains Rider 显示了该问题的描述提示。

    在编辑器中查看错误描述

    应用建议的快速修复,或点击 更多操作… 并从列表中选择相关的修复。

    在编辑器中应用快速修复
  • 或者打开 文件 标签页的 问题 工具窗口 Alt+6 ,在此窗口中,您可以查看问题描述,应用快速修复,导航到源代码中出现错误的片段,并在 编辑器预览 窗格中修复它们而无需离开工具窗口。 了解更多信息,请参阅 Problems tool window

配置与 TypeScript 语言服务的集成

在大多数情况下,一切功能开箱即用,无需手动配置。 但是,如果您希望使用自定义的 typescript 包或向 TypeScript 语言服务传递一些 命令行选项 ,可以自定义默认设置。

  1. 设置/首选项 对话框(Ctrl+Alt+S )中,转到 语言和框架 | TypeScript

    或者,点击 语言服务 小部件在 状态 栏上,然后点击 打开设置

    TypeScript 小部件

    TypeScript 页面打开。

  2. 指定要使用的 Node.js 解释器。

    如果您选择 项目 别名,JetBrains Rider 将自动使用 Node 解释器 字段中 Node.js 页面的项目默认解释器。 在大多数情况下,JetBrains Rider 会检测到项目的默认解释器并自动填写该字段。

    您也可以选择另一个已配置的本地或远程解释器,或点击 “浏览”按钮 并配置一个新的。

  3. TypeScript 字段中,指定要使用的 TypeScript 版本(JetBrains Rider 显示当前选择的版本)。

    • 默认情况下,将使用项目 typescript 文件夹中的 node_modules 包。

    • 捆绑: 选择此选项以使用随 JetBrains Rider 提供的 typescript 软件包,而不尝试查找其他软件包。

    • 选择: 选择此选项以使用自定义 typescript 包而不是 JetBrains Rider 捆绑的包。 在打开的对话框中,选择相关包的路径。

    • 如果您的项目包管理器是 Yarn 2 ,您必须使用通过 Yarn 2 安装的 typescript 包。 在这种情况下, yarn:package.json:typescript 默认情况下被选中。

      了解更多有关 npm 和 Yarn 的包管理器的信息。

  4. 请确保选中 TypeScript 语言服务 复选框。 结果:

    • 语法和错误高亮基于 TypeScript 语言服务提供的注解。

    • 补全列表同时包含来自 TypeScript 语言服务的建议和 JetBrains Rider 计算出的建议。

    • TypeScript 代码被编译成 JavaScript。

  5. 请使用以下控件配置 TypeScript 语言服务的行为。

    • 显示项目错误 — 默认选中该复选框,TypeScript 语言服务会检查整个项目的代码。 检测到的错误列在 项目错误 选项卡的 问题工具窗口中,根据它们发生的文件进行分组。

      为避免性能问题,请清除 显示项目错误 复选框,以便 TypeScript 语言服务仅在您打开文件时检查该文件。 项目错误 选项卡将列出仅在您已打开的文件中检测到的错误。

    • 显示建议 — 默认选中该复选框,JetBrains Rider 除了显示实际错误外,还会显示 TypeScript 语言服务检测到的潜在问题。

      显示建议已启用
      显示建议已禁用
    • 启用服务驱动的类型引擎 - 选中此复选框以根据 TypeScript 编译器的数据评估符号的类型。

      默认情况下,复选框是清除的,因此类型评估、解析、代码检查和重构基于 JetBrains Rider 内部 TypeScript 引擎的类型信息。

      此默认行为可能会导致性能问题以及类型解析中的错误,因为 JetBrains Rider 内部 TypeScript 引擎使用的类型评估算法与 TypeScript 编译器的算法不同。 选择复选框可能有助于避免这些问题。

  6. 选项 字段中,指定在未找到 tsconfig.json 文件时传递给 TypeScript 语言服务的命令行选项。 请参阅 TSC arguments中的可接受选项列表。 请注意, -w--watch监视输入文件 )选项是无关的。

重启 TypeScript 语言服务

  • 点击 语言服务 控件栏中的 状态 ,然后点击 重启服务图标

    状态栏上的 TypeScript 组件:重启 TypeScript 语言服务

本地化错误信息

本地化错误信息
  1. 设置/首选项 对话框(Ctrl+Alt+S )中,前往 语言和框架 | TypeScript

  2. TypeScript 字段中,指定一个不同于 已捆绑typescript 包。 这可能是 typescript 包,来自您的项目 node_modules 文件夹或其他任何位置。

  3. 选项 字段中,输入 --locale(要使用的语言缩写)。 当前支持韩语(ko )和日语(ja)。

编辑 TypeScript 代码

JetBrains Rider 为 TypeScript 提供智能编码辅助,包括 上下文感知代码补全符号自动导入文档查询参数提示导航TypeScript 语法高亮linting重构等。

自动导入

JetBrains Rider 可为模块、类、组件及任何其他导出的 TypeScript 符号生成导入语句。 默认情况下,JetBrains Rider 在您完成 TypeScript 符号时会添加 import 语句。

当您键入代码或粘贴包含尚未导入的符号的片段时,JetBrains Rider 还可以为该符号生成导入语句。 如果只有一个来源可以导入符号,JetBrains Rider 将静默插入导入语句。 否则,请使用 自动导入工具提示专用导入快捷修复

在代码完成时添加 import 语句

自动导入在完成时
  1. 设置/首选项 对话框 (Ctrl+Alt+S) 中,前往 编辑器 | 常规 | 自动导入自动导入页面打开。

  2. TypeScript/JavaScript 区域中,确保选中 自动添加 TypeScript import代码补全时 复选框。

添加 import 语句在键入或粘贴代码时

在键入或粘贴时自动导入
  1. 设置/首选项 对话框 (Ctrl+Alt+S) 中,前往 编辑器 | 常规 | 自动导入自动导入页面打开。

  2. TypeScript/JavaScript 区域中,确保选中 自动添加TypeScript import动态明确 import 复选框。

使用自动导入工具提示

  • 如果在完成或编辑时未添加 TypeScript 符号的 import 语句,JetBrains Rider 会显示一个弹出窗口,建议导入该符号。 要接受建议,请按 Alt+Enter

    如果有多个可能的导入来源,JetBrains Rider 会通知您:

    自动导入工具提示:多个选择

    在这种情况下按下 Alt+Enter 会打开一个建议列表:

    自动导入提示:多项选择,建议列表
  • 要隐藏自动导入工具提示,请打开 设置/首选项 对话框(Ctrl+Alt+S ),转到 编辑器 | 常规 | 自动导入 ,并清除 包含自动导入工具提示 复选框。

使用import快速修复

如果自动导入工具提示未显示,您可以随时按 Alt+Enter 并通过快速修复添加导入语句。

  • 要生成导入,请选择 插入导入自

    使用快速修复自动导入:无选项

    如果只有一个来源可导入符号,JetBrains Rider 会生成一个 import 语句:

    使用快速修复自动导入:已添加 import 语句
  • 如果有多个源可以导入符号,请从建议列表中选择相关的一个:

    自动导入与快速修复,多种选择:建议列表
  • 如果您的项目中启用了 TypeScript 语言服务,也可以使用其建议:

    使用 TypeScript 语言服务的建议自动导入:多个可选项

配置在 import 语句中使用 type 修饰符

  1. 按下 Ctrl+Alt+S 以打开设置,然后选择 编辑器 | 代码风格 | TypeScript

  2. 切换到 导入 选项卡,并在 在导入中使用类型修饰符 字段中配置在类型的导入语句中使用 类型 修饰符。 请注意,设置仅适用于类型,对于非类型,无论您选择哪个选项,都不会插入 类型 修饰符。

    启用此选项后,如果在您的 tsconfig.json 中指定了 "importsNotUsedAsValues": "error""verbatimModuleSyntax": true ,则会添加一个 类型 修饰符。

    否则,如果没有首选的导入类型,则不会插入 类型 修饰符。

    自动

    使用此选项时,无论在您的 tsconfig .json 中是否指定 "importsNotUsedAsValues": "error""verbatimModuleSyntax": true ,始终会插入 类型 修饰符:

    始终使用 type

    使用此选项,JetBrains Rider 永远不会使用 类型 修饰符,而不论 "importsNotUsedAsValues": "error""verbatimModuleSyntax": true 标志在您的 tsconfig.json 中:

    从未

如果已经有一个带有 类型 修饰符的 import 语句,此修饰符将始终用于进一步导入类型,而不论选择的选项和您的 tsconfig.json 中的设置如何。

对于常量,使用 {<constant name>} 说明符代替 类型 修饰符。 对于 TypeScript 4.5 及更高版本,选中 自动始终 后,所有先前的修饰符将转换为 {type} 指定符。 否则,所有现有的指定符将保持不变。

了解更多信息,请访问 TypeScript 官方网站

配置导入语句的外观

  • 设置/首选项 对话框(Ctrl+Alt+S )中,转到 编辑器 | 代码样式 | TypeScript ,并使用 Import 选项卡中的控件。

文档查找

JetBrains Rider 允许您获取项目和其依赖项中的符号、外部库中定义的符号以及标准 JavaScript APIs 的引用,因为 TypeScript 实现了它们。

默认情况下,文档显示在 文档 弹出窗口中,但您始终可以在 文档工具窗口打开它,或者甚至配置它默认出现在 文档工具窗口 中。

快速文档查找:在弹出窗口和工具窗口之间切换

查看快速文档

  • 在编辑器中将鼠标悬停在所需符号上。

    或者,将文本光标放置在符号处并按下 Ctrl+Q 或从主菜单中选择 查看 | 快速文档

  • 要默认在 文档 工具窗口中打开快速文档,请在弹出窗口或工具窗口的工具栏中点击 选项图标 并清除 首先显示文档弹出窗口 选项。

  • 请在弹出窗口中点击 显示选项菜单图标 更改字体大小、显示快速文档工具栏或转到源代码。

您可以在工具窗口中打开特定代码元素的文档,并继续查看当前文件中其他元素的文档。

在工具窗口中,代码文档显示在未固定的选项卡上(标有星号符号(* )的选项卡上)。 您可以通过将鼠标悬停在符号上或将文本光标放置在符号上来查看此文档。

在文本光标处查看 MDN 文档

对于 TypeScript 中可用的标准 JavaScript 方法,JetBrains Rider 还会显示一个指向相应 MDN 文章 的链接。

MDN 快速文档查找
  1. 文档 窗口 Ctrl+Q 中,点击 MDN 链接。

  2. 或者按下 Shift+F1 或从主菜单中选择 视图 | 外部文档

JetBrains Rider 在 默认 JetBrains Rider 浏览器 中打开 MDN 文章。

查看内嵌提示

内嵌提示出现在编辑器中,为您的代码提供额外信息,使其更易于阅读和导航。

内嵌提示可用于 .ts .tsx 文件中。

  • 如果启用了 TypeScript 语言服务且 TypeScript 版本为 4.4 或更高版本,内联提示将从 TypeScript 语言服务中获取。

  • 如果 TypeScript 版本较早,或禁用了 TypeScript 语言服务,内联提示将由内部 JetBrains Rider 评估器提供。

与许多始终分析整个文件的检查和高亮显示不同,提示仅检索当前可见区域,并在滚动时更新。 此行为旨在提高性能。

参数提示

参数提示 显示方法和函数中的参数名称,以使您的代码更易读。

ws_typescript_parameter_hints.png

在 TypeScript 版本 5.2 及以上,参数提示在悬停时会变成链接。 点击按住 Ctrl 键的此类链接会将您带到方法定义。

配置参数提示

  1. 打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 编辑器 | 内联提示

  2. 展开 TypeScript 下的 参数名称

  3. 通过选择相应的复选框指定您希望显示参数提示的上下文。

    预览显示了您在设置中所做的更改如何影响代码外观。

  4. 要隐藏任意上下文中任意值类型的参数提示,请取消选中 TypeScript 复选框下的 参数名称

返回类型提示

JetBrains Rider 能在函数调用和调用链中显示函数返回类型。

  • 函数返回类型提示 是从 TypeScript Language Service 获取的。

  • 方法链接中的返回类型提示 将在方法调用分割为多行并返回至少 2 种不同类型时显示。

    方法链中的返回类型提示由内部 JetBrains Rider 评估器提供。

配置函数返回类型提示

  1. 打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 编辑器 | 内联提示

  2. 类型 下,展开 TypeScript 节点,然后选中 函数返回值类型 复选框。

  3. 若要在方法链中显示返回类型提示,请展开 方法链 节点并选中 TypeScript 复选框。

预览显示了您在设置中所做的更改如何影响代码外观。

类型提示

类型提示 显示变量、字段或参数的类型。 变量和字段的类型显示在其定义旁边。 参数的类型提示显示在函数调用中。 类型提示是从 JSDoc comments 或您的代码的静态分析中推断出的。

在 TypeScript 版本 5.3 及更高版本中,类型提示在悬停时会变成链接。 点击此链接并按下 Ctrl 会让您进入类型定义。

配置类型提示

  1. 打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 编辑器 | 内联提示

  2. 展开 Types | TypeScript

  3. 展开 类型注解 节点,并指定您希望显示类型提示的上下文。

    预览显示了您在设置中所做的更改如何影响代码外观。

  4. 若要隐藏任何上下文中任何值类型的参数类型和返回类型提示,请取消选中 TypeScript 复选框,位于 类型 下。

数字枚举值

JetBrains Rider 为 numeric enums 提供提示,使您的代码更易于阅读。 这些提示来自 TypeScript 语言服务,默认显示。

隐藏数值枚举值

  1. 打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 编辑器 | 内联提示

  2. 展开 节点并选择 TypeScript 复选框。 JetBrains Rider 将隐藏提示并仅显示显式初始化常量的值。 预览显示了您在设置中所做的更改如何影响代码外观。

TypeScript 中的 JavaScript 库

在使用 TypeScript 处理 JavaScript 库时,您需要为它们 安装类型声明。 JetBrains Rider 提醒您通过 npmyarn 安装它们,并相应地更新您的 package.json 文件。

安装类型声明

  1. 将文本光标放置在警告处,然后按 Alt+Enter

    缺少类型声明
  2. 选择建议并按 Enter

    添加类型声明

TypeScript 原生预览(TypeScript-Go)

JetBrains Rider 通过 TypeScript 原生预览 提供基本的 TypeScript-Go 支持。

启用 TypeScript-Go 支持

  • @typescript/native-preview 包作为项目依赖项安装,而不是 typescript 包。

    为此,请打开 package.json ,并将 typescript 替换为 @typescript/native-preview。 当将光标悬停于 @typescript/native-preview 版本上时,JetBrains Rider 会显示一个弹窗,提示您指定的包未安装。 点击 运行 'npm install' 链接。

    安装 @typescript/native-preview,替换 typescript
  • 在计算机其他位置安装 @typescript/native-preview ,并将其指定为项目中使用的 TypeScript 包。

    为此:

    1. 在您的计算机上安装 @typescript/native-preview 包,例如,全局安装。

      在嵌入的 终端 (Alt+F12 )中,输入:

      npm install --g @typescript/native-preview

    2. 设置/首选项 对话框(Ctrl+Alt+S )中,转到 语言与框架 | TypeScript ,并在 TypeScript 字段中指定 @typescript/native-preview 包的路径。 如果按照标准安装流程操作,JetBrains Rider 会在 TypeScript 下拉列表中显示 @typescript /native-preview 包。

    在设置对话框中启用全局安装的 @typescript/native-preview 包
  • 本地克隆并构建 TypeScript-Go 仓库 ,然后在 TypeScript 字段的 设置 | 语言与框架 | TypeScript 对话框中 按照上述方式 设置该位置。

重新设置代码格式

JetBrains Rider 允许您根据当前的 代码样式方案 重新格式化 TypeScript 代码。

您还可以在 .editorconfig 中指定格式设置,或使用 Prettier

装饰器

对于装饰器,在重新格式化期间抑制在每个装饰器后插入换行可能很重要。

配置装饰器

  1. 打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 编辑器 | 代码风格 | TypeScript

  2. 包装和大括号 选项卡上,选择相关的装饰器类型选项。

    配置装饰器的换行方式

以下是装饰器的可用格式设置选项:

请勿换行

选择此选项时,重新格式化装饰器行时不应用换行。

如果长则换行

选择此选项时,如果行超出右边距,则会换行。

右边距在 在以下位置硬包装 字段中定义,位于 设置 | 编辑器 | 代码样式 | JavaScript | 换行和大括号 中。 如果行超出指定的数字,则会换行。

如果太长就砍掉

选择此选项时,如果装饰器超出右边距,将每行格式化一个装饰器。

总是换行

选择此选项时,所有装饰器将每行格式化一个。

语法高亮显示

您可以根据自己的偏好和习惯配置 TypeScript-aware 语法高亮显示。

  1. 设置/首选项 对话框(Ctrl+Alt+S )中,前往 编辑器 | 颜色方案 | TypeScript

  2. 选择颜色方案,接受从默认设置继承的高亮设置,或按照 配色方案:IDE 文本的字体和颜色 中的描述自定义它们。

代码导航

您可以使用不同的操作和弹出窗口在 JetBrains Rider 编辑器中快速浏览您的 TypeScript 项目。

转到符号声明

您可以从变量、字段、方法或任何其他符号导航到其声明或 在弹出窗口中查看符号定义 ,而无需离开正在编辑的代码。

  • 要跳转到符号的声明位置,请将文本光标放在符号的使用位置并按 Ctrl+B 或从主菜单中选择 导航 | 声明或用法

    转到声明

    或者,使用 Ctrl+Click :按住 Ctrl 悬停在符号上。 当该符号变为超链接时,请在不松开的情况下点击此超链接 Ctrl

    按住 Ctrl 键点击以转到声明
  • 若要在弹出窗口中查看符号的定义,请将文本光标放在该符号的使用位置并按 Ctrl+Shift+I 或从主菜单中选择 视图 | 快速定义

    在弹出窗口中查看符号的定义

转到符号的用法

您可以查看符号的用法列表并选择跳转到其中一个。

  1. 要获取符号用法的列表,请将文本光标放置在符号的声明处,然后执行以下操作之一:

    • Ctrl+B 或从主菜单中选择 导航 | 声明或用法

    • Ctrl+Alt+F7 或从主菜单中选择 编辑 | 查找用法 | 显示用法

  2. 在弹出窗口中,使用工具栏上的图标配置列表外观并过滤掉不相关的用法,例如,在 import 语句中。

    配置 Go To Usages 列表
  3. 从列表中选择要跳转的符号用途,然后按 Enter

    转到符号的用法

转到符号的类型声明

您可以从变量、字段、方法或任何其他符号导航到其类型声明。 或者, 在弹出窗口中打开类型定义 ,而不跳转到类型声明。

JetBrains Rider 还显示对象的 推断类型。 您可以在工具提示或文档弹出窗口中查看推断的类型信息。

  • 要从符号跳转到其类型的声明,请将文本光标放置在符号的使用位置并按 Ctrl+Shift+B 或从主菜单中选择 导航 | 类型声明

    转到类型声明
  • 要在弹出窗口中查看符号的类型定义,请将文本光标放在您要查看类型定义的符号上,然后选择 查看 | 快速类型定义

    快速类型定义

    对于类的一个实例,这将揭示类本身,而不是定义该实例的位置。

请注意 转跳到声明转到类型声明 之间的区别。 假设您有一个文件 app.ts ,其中包含以下代码:

import {Dog} from "./dog"; let dog = new Dog(); dog.bark();

如果您将文本光标放置在 dogdog.bark() ,则 转跳到声明 会将您带到 let dog = new Dog () 中变量的声明,而 转到类型声明 会将您带到类 Dog 的声明。

查看符号的推断类型信息

  • 按住 Ctrl 并将光标悬停在符号上。

    符号的推断类型显示在工具提示中
  • 或者,悬停在符号上。 JetBrains Rider 会立即在 文档 弹出窗口中显示其引用。

    对象的推断类型显示在文档弹出窗口中

    了解更多信息,请参阅上面的 文档查找

在子类、超类、重写和实现之间导航

您可以通过使用编辑器中的装饰图标或按下相应的快捷键来跟踪类的实现和重写方法。

转到子类

  • Ctrl+Alt+B 或点击 重写方法图标 图标,然后从列表中选择相关的类。

    转到派生类
  • 或者,从主菜单中选择 导航 | 实现 或从上下文菜单中选择 转到 | 实现 ,然后从列表中选择相关的类。

转到超类或重写的方法

  • 将文本光标放在子类上并按 Ctrl+U。 JetBrains Rider 将您带到超类的声明处,并将文本光标放置在其名称上。

  • 点击 覆盖方法图标 覆盖方法旁的标记。 JetBrains Rider 将您带到超类,文本光标位于被重写的方法处。

    转到重写的方法

    或者,将文本光标放在重写方法处,然后按 Ctrl+U 或从主菜单中选择 导航 | 超级方法 或从上下文菜单中选择 转到 | 超级方法

转到接口或已实现的方法

  • 请将文本光标放在接口的实现处并按下 Ctrl+U

    从类转到接口

    JetBrains Rider 将会带您到接口的声明处,并将文本光标定位到其名称。

  • 点击 实现方法图标 位于实现方法旁边的边框中。 JetBrains Rider 将您带到相应的界面,并将文本光标定位到已实现的方法。

    转到实现的方法

    或者,将文本光标放在实现方法处,然后按 Ctrl+U ,或者从主菜单中选择 导航 | 超级方法 ,或从上下文菜单中选择 转到 | 超级方法

在 TypeScript 中重构

JetBrains Rider 提供常见的重构过程,例如 重命名/移动等,以及特定于 TypeScript 的重构过程,例如 更改签名引入参数引入变量。 如需更多信息,请参阅

运行和调试您的应用程序

使用 JetBrains Rider,您可以运行和调试客户端的 TypeScript 代码以及运行在 Node.js 中的 TypeScript 代码。 了解更多信息,请参阅 运行和调试 TypeScript

最后修改日期: 2025年 9月 26日