【TypeScript】importする際相対パスではなくエイリアスを使用する

概要

有名なbulletproof-reactのリポジトリを眺めていたところ、import 文が以下のように書かれていました。

axios.t

import { API_URL } from "@/config";
import { useNotificationStore } from "@/stores/notifications";
import storage from "@/utils/storage";

通常../config などの相対パスで書かれている物が当たり前だと思っていました。
@のようにエイリアスを登録することができれば、

• コードの簡略化
• ディレクトリ変更の際にパス修正が一か所で済む

と思い、方法を調べました。

答え

tsconfig.json へ以下を追加することでできました。
プロジェクトを新規作成する際はあらかじめ設定しておきたいです。

tsconfig.json

{
  "compilerOptions": {
    (略)
    /* Path */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
  },

参考

https://reigle.info/entry/2022/08/22/100000