メインコンテンツへスキップ

consistent-type-imports

型インポートの一貫した使用を強制します。

🔧

このルールによって報告されるいくつかの問題は、 --fix ESLintコマンドラインオプションで自動的に修正できます。.

TypeScriptでは、インポートにtypeキーワードを指定して、エクスポートがランタイムではなく型システムにのみ存在することを示すことができます。これにより、トランスパイラーは依存関係の型を知らなくてもインポートを削除できます。

詳細については、ブログ > 型のエクスポートとインポートの一貫性：理由と方法を参照してください。

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

Playgroundでこのルールを試す↗

オプション​

このルールは次のオプションを受け入れます

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;
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は、インポートキーワードの後にtypeキーワードを追加しますimport type { A } from '...'。これがデフォルトです。
  • inline-type-importsは、typeキーワードをインライン化します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の変更を参照してください。

型対応のlintingを使用している場合、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の両方を同時に使用すると、エラーが競合する可能性があります。そのため、どちらか一方のみを使用することをお勧めします。両方を同時に使用することは避けてください。

使用しない場合​

スタイルの理由で両方のインポートの種類を具体的に使用したい場合、またはどちらかのスタイルを強制したくない場合は、このルールを避けることができます。

ただし、スタイルの不整合はプロジェクトの可読性を損なう可能性があることに注意してください。プロジェクトに最適なこのルールに1つのオプションを選択することをお勧めします。

リソース​