大きなプロジェクトになるとパスが複雑になってくることがあります。例えば../../../../foo/barのように深いネストにあるファイルから別の深いネストにあるファイルを参照したい場合などです。
そのような場合はtsocnfig.jsonでpathsセクションを設定することでfoo/barのように短いパスとすることができます。先に「foo/以下はアレを入れるディレクトリだ」というように決めてから設定しましょう。
エイリアスを設定する
設定が必要なセクションは２つです。
| セクション | 説明 |
|---|---|
baseUrl | pathsの共通パス |
paths | baseUrl以降のパスのマップ |
例
このように設定してみました。
{
"baseUrl": "src",
"paths": {
"foo/*": [
"foo/*",
"foo/*/src/index.ts"
],
"foo": [
"foo",
"foo/src/index.ts"
]
}
}これはfooやfoo/bar/bazというエイリアス名と何かしらの対象ファイルを紐付ける設定です。
例えば、foo/*であれば["foo/*","foo/*/src/index.ts"]を見ると設定していますね。これはfoo/bar/bazという名前でインポートしようとした時に、まずはsrc/foo/bar/baz/package.jsonにmainやmoduleなどの記載があり、その対象のファイルが存在すればそれを使ってくださいという設定です。もし、それが無ければ配列の次の要素の「src/foo/bar/baz/src/index.tsを使ってね」となります。
２つ設定しているのは、残念ながらfooで読み込みたい時にfoo/*という設定は効かない為、同じ用な設定が必要になります。
注意
僕がよくエイリアスの設定が効かない問題に引っかかります。そんな時は大抵これです。
この
.tsファイルはどのtsconfigを見ているのかその
tsconfigのfilesに対象の.tsファイルは含まれているか
を確認しましょう。
