【TypeScript】import ... from @ の "@"とは？

目的

日本語で説明しているところを見なかったのでまとめ

前提：ディレクトリ構成

ts-project/
  ├ config/
    └ local.ts
  ├ src/
  │ └ view
  │   └ HogeView.ts
  │ └ controller
  │   └ FugaController.ts
  └ tsconfig.json

import ... from @ を使わない場合

相対パスで指定していくため、ディレクトリ構成が複雑だと煩雑になる

FugaController.ts

import { localConfig } from ../../config/local
import { HogeView } from ../view/HogeView

import ... from @ を使う場合

下記に記載した tsconfig.json のように設定すると、カレントディレクトリを意識せずにimportできるようになる

FugaController.ts

import { localConfig } from @config/local
import { HogeView } from @/view/HogeView

tsconfig.json

{
  "compilerOptions": {
    
    // 省略
    
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@config/*": ["config/*"],
    }
  }
}