tsconfig.json でのエイリアス設定

プロジェクトのルートにある tsconfig.json ファイルを開きます。ファイルが存在しない場合は、新しく作成してください。

compilerOptions セクションに baseUrl と paths を追加して、エイリアスを設定します。例えば、src フォルダを基点としてエイリアスを設定したい場合、以下のように記述します。

jsonCopy code# tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // プロジェクトのルートを基点に設定
    "paths": {
      "@/components/*": ["src/components/*"], // @/componentsエイリアスをsrc/components/にマッピング
      "@/utils/*": ["src/utils/*"] // @/utilsエイリアスをsrc/utils/にマッピング
    }
  }
}

VSCode の設定

VSCodeはtsconfig.jsonの設定を自動的に認識し、TypeScriptファイル内でのimport時にエイリアスに基づいた補完を提供します。特別なVSCodeの設定は必要ありません。ただし、エイリアスを設定した後にVSCodeを再起動することで、変更が正しく認識されるようになる場合があります。

エイリアスを使用したimport例

上記の設定後、以下のようにエイリアスを使用してモジュールをimportできるようになります。

typescriptCopy codeimport { MyComponent } from "@components/MyComponent";
import { utilityFunction } from "@utils/utilityFunction";

その他

• エイリアスを使用すると、ビルドツールや他のツールがエイリアスを正しく解決できない場合があります。WebpackやBabelなどを使用している場合は、これらのツールにも同様のエイリアス設定を行う必要があります。
• この設定はTypeScriptプロジェクトに特有のものです。JavaScriptプロジェクトで同様の機能を実現するには、Babelのmodule-resolverプラグインなどを使用する必要があります。