TypeScript の絶対パスの import をプロジェクトルートから辿るようにする

何やら TypeScript では絶対パスでプロジェクトルートから import を行えるようだと耳にしました。これで相対パス地獄から逃れることができますね。早速動作確認していきたいと思います。

使用した TypeScript のバージョンは 3.0.3 です。

動作確認

以下のようなディレクトリ構成で動作確認を進めていきます。

.
├── package.json
├── src
│   ├── app-global-lib.ts
│   ├── index.ts
│   └── nested
│       └── nested
│           └── super-nested-lib.ts
└── tsconfig.json

src/app-global-lib.ts

src 直下の src/app-global-lib.ts からは適当な定数を一つ export します。

export const APP_GLOBAL_CONST = 1

src/nested/nested/super-nested-lib.ts

それを何階層かネストしたファイル src/nested/nested/super-nested-lib.ts から import します。src/... のように絶対パスで指定しています。

import { APP_GLOBAL_CONST } from 'src/app-global-lib'

export const SUPER_NESTED_CONST = 2

このままだと Cannot find module のエラーが出るのですが、ここで tsconfig.json の

"baseUrl": "./"

のコメントアウトを外すと絶対パスがプロジェクトルートからのパスとして解釈され、コンパイルが通るようになります。

src/index.ts

src/index.js では今まで通り相対パスで import します。node_modules のライブラリも問題なく参照できるか確認したかったので適当に uuid を import しています。

import { APP_GLOBAL_CONST } from './app-global-lib'
import { SUPER_NESTED_CONST } from './nested/nested/super-nested-lib'
import uuid from 'uuid'

console.log(APP_GLOBAL_CONST + SUPER_NESTED_CONST, uuid())

これで無事 1 + 2 で 3 と UUID が表示されました。

感想

とても見やすくなりました。通常の Node.js でもできると嬉しいです。

ところで 以前 に GitHub - piotrwitek/react-redux-typescript-guide: The complete guide to static typing in "React & Redux" apps using TypeScript を読んだ時に気になったのですが

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

という設定を tsconfig.json に行うと import @src/app-global-lib という参照の仕方もできるようなのですが、どちらがオススメなのでしょうか。

参考

• Module Resolution · TypeScript を見ると更にいろんな参照の仕方ができるようですが、今回は追いかけ切れませんでした