「path alias」の設定方法 - ytak-sagit/game-of-life-react GitHub Wiki

path alias is 何

  • TypeScript のコード実装時、import するソースコードのパスにエイリアスを設定できる機能
  • ../../Hoge.tsx のような相対パス参照ではなく、@/components/Hoge.tsx のような絶対パス参照にできる

手順

  1. tsconfig.paths.json の追加と必要設定の記載
  2. tsconfig.json へ tsconfig.paths.json を extends
  3. ［Viteを利用している場合］vite.config.ts の修正

1. tsconfig.paths.json の追加と必要設定の記載

下記内容で tsconfig.paths.json を新規作成

  • src ディレクトリは、tsconfig.paths.json と同じ階層に配置されている前提
  • 以下では src ディレクトリ以下のソースコードを ~/ で参照できるように設定している
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

2. tsconfig.json へ tsconfig.paths.json を extends

tsconfig.json へ以下のように追記する

{
  "include": ["src"],  // ここは src となっている必要がある
+ "extends": "./tsconfig.paths.json"
}

3.［Viteを利用している場合］vite.config.ts の修正

vite-tsconfig-paths のインストール

Bun の場合

bun add -d vite-tsconfig-paths

npm の場合

npm i -D vite-tsconfig-paths

vite.config.ts の plugins へ tsconfigPaths() を追記

import { defineConfig } from 'vite'
+ import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
+ plugins: [tsconfigPaths()],
})

参考