【TypeScript】パスのエイリアスの設定方法

概要

TypeScript利用時に自作のファイルのディレクトリ階層が深くなっていくと import文を相対パスで記載するのがつらくなってきます。

そういう場合、tsconfig.json の compilerOptions.paths を設定することでパスのエイリアスを設定することができ、import文の記述や読むのが楽になります。

www.typescriptlang.org

サンプル

ディレクトリ構成

• src/test.ts
• src/hoge/hoge.ts
• src/hoge/hige/hige.ts
• src/hoge/hige/hage/hage.ts
• tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".", 
    "paths": {
      "@hoge/*": ["src/*"]
    }
  }
}

呼び出し側

import { Aaa } from '@hoge/test';
import { Bbb } from '@hoge/hoge/hoge';
import { Ccc } from '@hoge/hige/hige';
import { Ddd } from '@hoge/hige/hage/hage';

どのディレクトリでも上記の設定でimportできるようになります。

おわりに

• 将来的にNPMパッケージ化した時にエイリアスとパッケージ名を同じにすればtsconfig.json とpackage.json の修正のみで対応できます。
• index.ts（バレル）と併用することで、あたかもNPMパッケージを使用している感じにコーディングできます。
• import文のパスがどのファイルからも同じパスになるので読みやすくなります。

関連記事

kakkoyakakko2.hatenablog.com