モジュールパスのエイリアス

大きなプロジェクトになるとパスが複雑になってくることがあります。例えば../../../../foo/barのように深いネストにあるファイルから別の深いネストにあるファイルを参照したい場合などです。

そのような場合はtsocnfig.jsonpathsセクションを設定することでfoo/barのように短いパスとすることができます。先に「foo/以下はアレを入れるディレクトリだ」というように決めてから設定しましょう。

エイリアスを設定する

設定が必要なセクションは2つです。

セクション説明
baseUrlpathsの共通パス
pathsbaseUrl以降のパスのマップ

このように設定してみました。

{
  "baseUrl": "src",
  "paths": {
     "foo/*": [
      "foo/*",
      "foo/*/src/index.ts"
    ],
    "foo": [
      "foo",
      "foo/src/index.ts"
    ]
  }
}

これはfoofoo/bar/bazというエイリアス名と何かしらの対象ファイルを紐付ける設定です。

例えば、foo/*であれば["foo/*","foo/*/src/index.ts"]を見ると設定していますね。これはfoo/bar/bazという名前でインポートしようとした時に、まずはsrc/foo/bar/baz/package.jsonmainmoduleなどの記載があり、その対象のファイルが存在すればそれを使ってくださいという設定です。もし、それが無ければ配列の次の要素の「src/foo/bar/baz/src/index.tsを使ってね」となります。

2つ設定しているのは、残念ながらfooで読み込みたい時にfoo/*という設定は効かない為、同じ用な設定が必要になります。

注意

僕がよくエイリアスの設定が効かない問題に引っかかります。そんな時は大抵これです。

  1. この.tsファイルはどのtsconfigを見ているのか
  2. そのtsconfigfilesに対象の.tsファイルは含まれているか

を確認しましょう。