useImportType

TypeScript and TSX

摘要

¥Summary

规则生效日期：v1.5.0

¥Rule available since: v1.5.0
诊断类别：lint/style/useImportType

¥Diagnostic Category: lint/style/useImportType
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则包含 safe 修复程序。

¥This rule has a safe fix.
此规则的默认严重级别为 warning。

¥The default severity of this rule is warning.
来源：

¥Sources:
- 灵感来自 @typescript-eslint/consistent-type-imports
  
  ¥Inspired from @typescript-eslint/consistent-type-imports

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useImportType": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

提倡使用 import type 作为类型。

¥Promotes the use of import type for types.

TypeScript 允许在 import 类型上指定 type 关键字，以表明运行时不存在 import 类型。这允许编译器安全地丢弃类型导入，而无需查找其定义。这还确保某些模块不会在运行时加载。

¥TypeScript allows specifying a type keyword on an import to indicate that the import doesn’t exist at runtime. This allows compilers to safely drop imports of types without looking for their definition. This also ensures that some modules are not loaded at runtime.

该规则确保所有仅用作类型的导入都使用仅类型的 import。它还将内联类型导入分组到分组的 import type 中。

¥The rule ensures that all imports used only as a type use a type-only import. It also groups inline type imports into a grouped import type.

如果你使用 TypeScript 编译器 (TSC) 将代码编译为 JavaScript，则可以禁用此规则，因为 TSC 可以删除仅用作类型的导入。但是，为了保持一致性并与其他编译器兼容，你可能需要启用此规则。在这种情况下，我们建议启用 TSC 的 verbatimModuleSyntax。此配置确保 TSC 保留未标记 type 关键字的导入。

¥If you use the TypeScript Compiler (TSC) to compile your code into JavaScript, then you can disable this rule, as TSC can remove imports only used as types. However, for consistency and compatibility with other compilers, you may want to enable this rule. In that case we recommend to enable TSC’s verbatimModuleSyntax. This configuration ensures that TSC preserves imports not marked with the type keyword.

你可能还想从 TypeScript LSP 启用编辑器设置 typescript.preferences.preferTypeOnlyAutoImports。此设置在 Visual Studio Code 中可用。它确保在编辑器自动导入类型时使用 type。

¥You may also want to enable the editor setting typescript.preferences.preferTypeOnlyAutoImports from the TypeScript LSP. This setting is available in Visual Studio Code. It ensures the type is used when the editor automatically imports a type.

TypeScript 实验性装饰器的注意事项

¥Caveat with TypeScript experimental decorators

某些框架（如 Angular 和 NestJS）依赖于实验性 TypeScript 装饰器，允许根据类型注释生成代码。这主要用于依赖注入。

¥Some frameworks like Angular and NestJS rely on experimental TypeScript decorators which allow code to be generated based on type annotations. This is mainly used for dependency injection.

由于 Biome 不知道装饰器是如何实现的，因此无法检测到用作类型的导入在装饰器生成的代码中也用作值。这导致 Biome 建议将一些导入作为类型导入，这些导入实际上在运行时用作值。

¥Since Biome doesn’t know how a decorator is implemented, it is unable to detect that an import used as a type is also used as a value in the code generated by a decorator. This leads Biome to suggest importing some imports as type, which are actually used as value at runtime.

我们尚未找到支持此模式的方法。我们建议在使用此类装饰器时禁用此规则。

¥We haven’t found a way to support this pattern yet. We recommend disabling this rule when using such decorators.

示例

¥Examples

无效

¥Invalid

1
import { A } from "./mod.js";
2
type TypeOfA = typeof A;
3
let a: A;

code-block.ts:1:8 lint/style/useImportType  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ All these imports are only used as types.
  
  > 1 │ import { A } from “./mod.js”;
      │        ^^^^^^^^^^^^^^^^^^^^^
    2 │ type TypeOfA = typeof A;
    3 │ let a: A;
  
  ℹ Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
  
  ℹ Safe fix: Use import type.
  
    1 │ import·type·{·A·}·from·“./mod.js”;
      │        +++++

1
import { type A, type B } from "./mod.js";

code-block.ts:1:8 lint/style/useImportType  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ All these imports are only used as types.
  
  > 1 │ import { type A, type B } from “./mod.js”;
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
  
  ℹ Safe fix: Use import type.
  
    1   │ - import·{·type·A,·type·B·}·from·“./mod.js”;
      1 │ + import·type·{·A,·B·}·from·“./mod.js”;
    2 2 │

1
import { type A, B } from "./mod.js";
2
let c: A;
3
let d: typeof B;

code-block.ts:1:8 lint/style/useImportType  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ All these imports are only used as types.
  
  > 1 │ import { type A, B } from “./mod.js”;
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ let c: A;
    3 │ let d: typeof B;
  
  ℹ Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
  
  ℹ Safe fix: Use import type.
  
    1   │ - import·{·type·A,·B·}·from·“./mod.js”;
      1 │ + import·type·{·A,·B·}·from·“./mod.js”;
    2 2 │   let c: A;
    3 3 │   let d: typeof B;

有效

¥Valid

1
import type { A } from "./mod.js";
2
let a: A;

1
import { B } from "./mod.js";
2
let a: B = new B();

1
import { type A, B } from "./mod.js";
2
let c: A;
3
let d = new B();

该规则忽略未使用的导入和具有导入属性的导入。

¥The rule ignores unused imports and imports with import attributes.

1
import { A } from "./mod.js";
2

3
import { B } from "./mod.js" with {};
4
export type { B };

选项

¥Options

此规则尊重 jsxRuntime 设置，如果设置为 "reactClassic"，则会对 React 全局变量进行例外处理。

¥This rule respects the jsxRuntime setting and will make an exception for React globals if it is set to "reactClassic".

`style`

style 选项允许强制执行导入类型的样式。该选项支持三个值：

¥The style option allows enforcing a style for importing types. The option supports three values:

inlineType：始终使用 import { type T } 而不是 import type { T }

¥inlineType: always use import { type T } instead of import type { T }
separatedType：始终使用 import type { T } 而不是 import { type T }

¥separatedType: always use import type { T } instead of import { type T }
auto：同时使用 import type { T } 和 import { type T }（默认）

¥auto: use both import type { T } and import { type T } (default)

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useImportType": {
6
          "options": {
7
            "style": "inlineType"
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
import { A } from "./mod.ts";
2
export type { A };

code-block.ts:1:8 lint/style/useImportType  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Some named imports are only used as types.
  
  > 1 │ import { A } from “./mod.ts”;
      │        ^^^^^^^^^^^^^^^^^^^^^
    2 │ export type { A };
    3 │ 
  
  ℹ This import is only used as a type.
  
  > 1 │ import { A } from “./mod.ts”;
      │          ^
    2 │ export type { A };
    3 │ 
  
  ℹ Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
  
  ℹ Safe fix: Add inline type keywords.
  
    1 │ import·{·type·A·}·from·“./mod.ts”;
      │          +++++

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useImportType": {
6
          "options": {
7
            "style": "separatedType"
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
import { A } from "./mod.ts";
2
export type { A };

code-block.ts:1:8 lint/style/useImportType  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ All these imports are only used as types.
  
  > 1 │ import { A } from “./mod.ts”;
      │        ^^^^^^^^^^^^^^^^^^^^^
    2 │ export type { A };
    3 │ 
  
  ℹ Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
  
  ℹ Safe fix: Use import type.
  
    1 │ import·type·{·A·}·from·“./mod.ts”;
      │        +++++

1
import { type A, type B } from "./mod.ts";
2
export type { A, B };

code-block.ts:1:8 lint/style/useImportType  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ All these imports are only used as types.
  
  > 1 │ import { type A, type B } from “./mod.ts”;
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ export type { A, B };
    3 │ 
  
  ℹ Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
  
  ℹ Safe fix: Use import type.
  
    1   │ - import·{·type·A,·type·B·}·from·“./mod.ts”;
      1 │ + import·type·{·A,·B·}·from·“./mod.ts”;
    2 2 │   export type { A, B };
    3 3 │

useImportType

摘要

如何配置

描述

TypeScript 实验性装饰器的注意事项

示例

无效

有效

选项

style

相关链接

`style`