Skip to main content

consistent-type-imports

强制一致使用类型导入.

🔧

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

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

¥TypeScript allows specifying a type keyword on imports to indicate that the export exists only in the type system, not at runtime. This allows transpilers to drop imports without knowing the types of the dependencies.

请参阅 博客 > 一致类型导出和导入:原因和方法 以了解更多详细信息。

¥See Blog > Consistent Type Exports and Imports: Why and How for more details.

eslint.config.mjs
export default tseslint.config({
rules: {
"@typescript-eslint/consistent-type-imports": "error"
}
});

在线运行试试这个规则 ↗

选项

该规则接受以下选项:

type Options = [
{
/** 是否禁止在类型注释(`import()`)中导入类型。 */
disallowTypeAnnotations?: boolean;
/** 当检测到导入仅在类型位置使用时,要添加的预期类型修饰符。 */
fixStyle?:
| 'inline-type-imports'
/** 当检测到导入仅在类型位置使用时,要添加的预期类型修饰符。 */
| 'separate-type-imports';
/** 仅类型导入的预期导入类型。 */
prefer?:
| 'no-type-imports'
/** 仅类型导入的预期导入类型。 */
| 'type-imports';
},
];

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

¥Options

prefer

仅类型导入的预期导入类型。 Default: "type-imports".

prefer 的有效值为:

¥Valid values for prefer are:

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

    ¥type-imports will enforce that you always use import type Foo from '...' except referenced by metadata of decorators. It is the default.

  • no-type-imports 将强制你始终使用 import Foo from '...'

    ¥no-type-imports will enforce that you always use import Foo from '...'.

带有 {prefer: 'type-imports'} 的正确代码示例,以及带有 {prefer: 'no-type-imports'} 的错误代码示例。

¥Examples of correct code with {prefer: 'type-imports'}, and incorrect code with {prefer: 'no-type-imports'}.

import type { Foo } from 'Foo';
import type Bar from 'Bar';
type T = Foo;
const x: Bar = 1;
Open in Playground

带有 {prefer: 'type-imports'} 的错误代码示例,以及带有 {prefer: 'no-type-imports'} 的正确代码。

¥Examples of incorrect code with {prefer: 'type-imports'}, and correct code with {prefer: 'no-type-imports'}.

import { Foo } from 'Foo';
import Bar from 'Bar';
type T = Foo;
const x: Bar = 1;
Open in Playground

fixStyle

当检测到导入仅在类型位置使用时,要添加的预期类型修饰符。 Default: "separate-type-imports".

fixStyle 的有效值为:

¥Valid values for fixStyle are:

  • separate-type-imports 将在 import 关键字 import type { A } from '...' 后添加 type 关键字。这是默认值。

    ¥separate-type-imports will add the type keyword after the import keyword import type { A } from '...'. It is the default.

  • inline-type-imports 将内联类型关键字 import { type A } from '...',并且仅在 TypeScript 4.5 及更高版本中可用。参见 文档在这里

    ¥inline-type-imports will inline the type keyword import { type A } from '...' and is only available in TypeScript 4.5 and onwards. See documentation here.

import { Foo } from 'Foo';
import Bar from 'Bar';
type T = Foo;
const x: Bar = 1;
Open in Playground

disallowTypeAnnotations

是否禁止在类型注释(import())中导入类型。 Default: true.

带有 {disallowTypeAnnotations: true} 的错误代码示例:

¥Examples of incorrect code with {disallowTypeAnnotations: true}:

type T = import('Foo').Foo;
const x: import('Bar') = 1;
Open in Playground

注意事项:@decorators + experimentalDecorators: true + emitDecoratorMetadata: true

¥Caveat: @decorators + experimentalDecorators: true + emitDecoratorMetadata: true

注意

如果你使用的是 experimentalDecorators: false(例如 TypeScript v5.0 的稳定装饰器),那么规则将始终按预期报告错误。此警告仅适用于 experimentalDecorators: true

¥If you are using experimentalDecorators: false (eg TypeScript v5.0's stable decorators) then the rule will always report errors as expected. This caveat only applies to experimentalDecorators: true

experimentalDecoratorsemitDecoratorMetadata 同时打开时,规则不会在包含装饰器的文件中报告任何错误。

¥The rule will not report any errors in files that contain decorators when both experimentalDecorators and emitDecoratorMetadata are turned on.

请参阅 博客 > 与旧装饰器和装饰器元数据一起使用时对 consistent-type-imports 的更改 以了解更多详细信息。

¥See Blog > Changes to consistent-type-imports when used with legacy decorators and decorator metadata for more details.

如果你使用的是 类型感知的 linting,那么我们将自动从你的 tsconfig 中推断你的设置,你不需要配置任何内容。否则,你可以通过设置 parserOptions.emitDecoratorMetadata = trueparserOptions.experimentalDecorators = true 明确告诉我们的工具分析你的代码,就像编译器选项已打开一样。

¥If you are using type-aware linting then we will automatically infer your setup from your tsconfig and you should not need to configure anything. Otherwise you can explicitly tell our tooling to analyze your code as if the compiler option was turned on by setting both parserOptions.emitDecoratorMetadata = true and parserOptions.experimentalDecorators = true.

importsNotUsedAsValues / verbatimModuleSyntax 的比较

¥Comparison with importsNotUsedAsValues / verbatimModuleSyntax

verbatimModuleSyntax 是在 TypeScript v5.0 中引入的(作为 importsNotUsedAsValues 的替代品)。此规则和 verbatimModuleSyntax 的行为方式大致相同。有一些行为差异:

¥verbatimModuleSyntax was introduced in TypeScript v5.0 (as a replacement for importsNotUsedAsValues). This rule and verbatimModuleSyntax mostly behave in the same way. There are a few behavior differences:

情况consistent-type-imports(ESLint)verbatimModuleSyntax(TypeScript)
未使用的导入忽略(考虑使用 @typescript-eslint/no-unused-vars类型错误
emitDecoratorMetadataexperimentalDecorations 的用法忽略包含装饰器的文件报告包含装饰器的文件
检测到故障不会使 tsc 构建失败;可以使用 --fix 自动修复tsc 构建失败;无法在命令行上自动修复
import { type T } from 'T';TypeScript 不会发出任何内容(它会 "elides" 导入)TypeScript 发出 import {} from 'T'

因为存在一些差异,同时使用此规则和 verbatimModuleSyntax 可能会导致冲突错误。因此,我们建议你只使用其中一个 - 不要同时使用两者。

¥Because there are some differences, using both this rule and verbatimModuleSyntax at the same time can lead to conflicting errors. As such we recommend that you only ever use one or the other -- never both.

何时不使用它

¥When Not To Use It

如果你出于风格原因特别想要使用两种导入类型,或者不希望强制使用一种风格而不是另一种风格,则可以避免此规则。

¥If you specifically want to use both import kinds for stylistic reasons, or don't wish to enforce one style over the other, you can avoid this rule.

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

¥However, keep in mind that inconsistent style can harm readability in a project. We recommend picking a single option for this rule that works best for your project.

相关

¥Related To

资源