大きなプロジェクトになるとパスが複雑になってくることがあります。例えば../../../../foo/bar
のように深いネストにあるファイルから別の深いネストにあるファイルを参照したい場合などです。
そのような場合はtsocnfig.json
でpaths
セクションを設定することでfoo/bar
のように短いパスとすることができます。先に「foo/
以下はアレを入れるディレクトリだ」というように決めてから設定しましょう。
エイリアスを設定する
設定が必要なセクションは2つです。
セクション | 説明 |
---|---|
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
を使ってね」となります。
2つ設定しているのは、残念ながらfoo
で読み込みたい時にfoo/*
という設定は効かない為、同じ用な設定が必要になります。
注意
僕がよくエイリアスの設定が効かない問題に引っかかります。そんな時は大抵これです。
この
.ts
ファイルはどのtsconfig
を見ているのかその
tsconfig
のfiles
に対象の.ts
ファイルは含まれているか
を確認しましょう。