跳至主要内容

一致类型导入

强制一致使用类型导入。

🔧

此规则报告的一些问题可以通过 --fix ESLint 命令行选项 自动修复。

TypeScript 允许在导入中指定 type 关键字来指示导出仅存在于类型系统中，而不是在运行时。这允许转译器在不知道依赖项类型的情况下删除导入。

有关更多详细信息，请参阅 博客 > 一致的类型导出和导入：为什么以及如何。

.eslintrc.cjs
module.exports = {
  "rules": {
    "@typescript-eslint/consistent-type-imports": "error"
  }
};

在游乐场中尝试此规则 ↗

选项​

此规则接受以下选项

type Options = [
  {
    disallowTypeAnnotations?: boolean;
    fixStyle?: 'inline-type-imports' | 'separate-type-imports';
    prefer?: 'no-type-imports' | 'type-imports';
  },
];

const defaultOptions: Options = [
  {
    prefer: 'type-imports',
    disallowTypeAnnotations: true,
    fixStyle: 'separate-type-imports',
  },
];

prefer​

此选项定义了仅类型导入的预期导入类型。prefer 的有效值为

  • type-imports 将强制您始终使用 import type Foo from '...'，除非由装饰器的元数据引用。这是默认值。
  • no-type-imports 将强制您始终使用 import Foo from '...'。

使用 {prefer: 'type-imports'} 的正确代码示例，以及使用 {prefer: 'no-type-imports'} 的错误代码示例。

import type { Foo } from 'Foo';
import type Bar from 'Bar';
type T = Foo;
const x: Bar = 1;
在游乐场中打开

使用 {prefer: 'type-imports'} 的错误代码示例，以及使用 {prefer: 'no-type-imports'} 的正确代码示例。

import { Foo } from 'Foo';
import Bar from 'Bar';
type T = Foo;
const x: Bar = 1;
在游乐场中打开

fixStyle​

此选项定义了在检测到导入仅在类型位置使用时要添加的预期类型修饰符。fixStyle 的有效值为

  • separate-type-imports 将在导入关键字 import type { A } from '...' 后添加类型关键字。这是默认值。
  • inline-type-imports 将内联类型关键字 import { type A } from '...'，并且仅在 TypeScript 4.5 及更高版本中可用。请参阅 此处文档。
import { Foo } from 'Foo';
import Bar from 'Bar';
type T = Foo;
const x: Bar = 1;
在游乐场中打开

disallowTypeAnnotations​

如果为 true，则不允许在类型注释 (import()) 中使用类型导入。默认值为 true。

使用 {disallowTypeAnnotations: true} 的错误代码示例

type T = import('Foo').Foo;
const x: import('Bar') = 1;
在游乐场中打开

警告：@decorators + experimentalDecorators: true + emitDecoratorMetadata: true​

注意

如果您使用的是experimentalDecorators: false（例如 TypeScript v5.0 的稳定装饰器），则该规则将始终按预期报告错误。此警告**仅**适用于experimentalDecorators: true

当同时启用experimentalDecorators和emitDecoratorMetadata时，该规则**不会**在包含装饰器的文件中报告任何错误。

有关更多详细信息，请参阅 博客 > 使用旧版装饰器和装饰器元数据时对一致类型导入的更改。

如果您使用的是 类型感知代码检查，那么我们将自动从您的 tsconfig 推断您的设置，您无需配置任何内容。否则，您可以通过设置 parserOptions.emitDecoratorMetadata = true 和 parserOptions.experimentalDecorators = true 来明确告诉我们的工具将您的代码分析为编译器选项已启用。

与importsNotUsedAsValues / verbatimModuleSyntax 的比较​

verbatimModuleSyntax 在 TypeScript v5.0 中引入（作为importsNotUsedAsValues的替代）。此规则和verbatimModuleSyntax的行为大多相同。有一些行为差异

情况consistent-type-imports（ESLint）verbatimModuleSyntax（TypeScript）
未使用导入忽略（请考虑使用 @typescript-eslint/no-unused-vars）类型错误
与 emitDecoratorMetadata 和 experimentalDecorations 结合使用忽略包含装饰器的文件报告包含装饰器的文件
检测到的错误不会导致 tsc 构建失败；可以使用 --fix 自动修复导致 tsc 构建失败；无法在命令行中自动修复
import { type T } from 'T';TypeScript 不会生成任何内容（它会“省略”导入）TypeScript 生成 import {} from 'T'

由于存在一些差异，同时使用此规则和 verbatimModuleSyntax 会导致冲突错误。因此，我们建议您只使用其中一个，而不是同时使用两者。

何时不使用它​

如果您出于风格原因需要同时使用两种导入方式，或者不想强制执行一种风格，则可以避免使用此规则。

但是，请记住，不一致的风格可能会损害项目的可读性。我们建议您为该规则选择一个最适合您项目的选项。

资源​