TypeScript インポート エラー 解決

TypeScript ESLint での "Missing file extension "ts" import/extensions" エラー

エラーの意味
このエラーは、TypeScript ファイルをインポートする際に、ファイル名の拡張子 ".ts" が省略されていることを示しています。ESLint の import/extensions ルールは、インポートするファイルの拡張子を指定することを推奨しています。

原因

• インポートするファイルが TypeScript ファイルではないが、拡張子 ".ts" を指定している。
• インポートするファイル名の拡張子を省略している。

解決方法

1. 拡張子の指定
   
   • インポートするファイル名の後に ".ts" 拡張子を付けます。

   import { MyClass } from './myClass.ts';
   

2. ESLint ルールの設定
   
   • ESLint の設定ファイル (.eslintrc.js など) で、import/extensions ルールのオプションを調整します。
     • allowAsDefault: 拡張子なしでインポートを許可するかどうか。
     • ignoredPaths: 拡張子チェックを無視するファイルやディレクトリ。

   module.exports = {
     extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
     rules: {
       'import/extensions': [
         'error',
         'always',
         {
           js: 'never',
           ts: 'never',
           tsx: 'never'
         }
       ]
     }
   };
   

• ESLint ルールの設定はプロジェクトのニーズに合わせて調整してください。
• 拡張子なしでインポートできる場合もありますが、明確にするために拡張子を指定することを推奨します。
• JavaScript ファイルの拡張子は通常 ".js" です。

日本語訳

1. ESLint ルールの設定
   

TypeScript: Missing file extension "ts" import/extensions

TypeScript: Missing file extension "ts" import/extensions

拡張子なしのインポートを許可する

module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  rules: {
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        ts: 'never',
        tsx: 'never',
        // 拡張子なしのインポートを許可する
        default: 'never'
      }
    ]
  }
};

この設定では、拡張子なしでインポートすることができます。ただし、プロジェクトのスタイルガイドやチームの慣習に従って、適切な判断をしてください。

インポートするファイルの拡張子を常に指定する

// 常に拡張子を指定する
import { MyClass } from './myClass.ts';

この方法では、すべてのインポートで拡張子を指定することで、コードの読みやすさと一貫性を保つことができます。

ESLint ルールの設定をカスタマイズする

module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  rules: {
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        ts: 'never',
        tsx: 'never',
        // 拡張子チェックを無視するファイルやディレクトリ
        ignoredPaths: ['**/node_modules/**']
      }
    ]
  }
};

この設定では、node_modules ディレクトリ内のファイルについては、拡張子チェックを無視することができます。

• 拡張子なしのインポートを許可する場合には、コードの読みやすさと一貫性を保つために、適切な命名規則を使用してください。
• 適切な解決方法は、プロジェクトのスタイルガイドやチームの慣習に基づいて選択してください。