跳至主要內容

一致的類型匯入

強制使用類型導入的一致性。

🔧

此規則回報的一些問題可自動修正為 --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 '...'，除非由裝飾器的 metadata 參照。這為預設值。
  • 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;
在 Playground 中開啟

使用 {prefer: 'type-imports'} 的不正確程式碼范例以及使用 {prefer: 'no-type-imports'} 的正確程式碼范例。

import { Foo } from 'Foo';
import Bar from 'Bar';
type T = Foo;
const x: Bar = 1;
在 Playground 中開啟

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;
在 Playground 中開啟

disallowTypeAnnotations​

如果為 true，類型標注 (import()) 中的類型匯入將不被允許。預設值為 true。

使用 {disallowTypeAnnotations: true} 的不正確程式碼范例

type T = import('Foo').Foo;
const x: import('Bar') = 1;
在 Playground 中開啟

注意事項：@decorators + experimentalDecorators: true + emitDecoratorMetadata: true​

注意事項

如果您使用的是 experimentalDecorators: false (例如 TypeScript v5.0 的穩定裝飾器)，則此規則將始終回報錯誤，如預期的那樣。此注意事項僅適用於 experimentalDecorators: true

當同時開啟 experimentalDecorators 和 emitDecoratorMetadata 時，此規則不會回報任何包含裝飾器的檔案中的錯誤。

請參閱 網誌 > 與舊版裝飾器和裝飾器元資料搭配使用時，consistent-type-imports 的變更 以取得更詳細的資訊。

如果你使用 感知型檢查，我們會自動從你的 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 會導致衝突的錯誤。因此我們建議你只使用其中一個或另一個 -- 絕不同時使用。

什麼時候不使用它​

如果你特別想因為風格的關係，同時使用兩種匯入類型，或不希望強制執行其中一個風格，你可以略過這個規則。

但是請記住，不一致的風格會降低專案的可讀性。我們建議針對這個規則選擇最適合你專案的單一選項。

資源​