tsconfig.jsonのrootDirとbaseUrlに関するメモ [TypeScript]

はじまり

TypeScriptのtsconfig.json
パラメータ多くてどれがどういう作用を及ぼすのかいまいちです。

今回はtsconfig.jsonでよくわかっていなかった
rootDirとbaseUrlの動きについてメモ。

rootDir

TypeScriptのソースコードがあるディレクトリを指定する。

例) こんな感じのフォルダ構成だったとして

project_root
  ┣━ src
  ┃  ┣━ index.ts
  ┃  ┗━ foo.ts
  ┣━ hoge.ts
  ┗━ tsconfig.json

rootDirに**./src**と指定した場合

tsconfig.json

{
  "compilerOptions": {
    "rootDir":"./src",
  }
}

./srcの外にあるソースコードを参照できなくなる。

index.ts

import * from '../hoge'; // ← これがNGになる
import * from './foo'; // ← これはsrc配下なのでOK

まとめ

rootDirは変なところにあるソースコードを無理やり参照するようなコードを防げる。

baseUrl

/* Base directory to resolve non-absolute module names. */

コメントにはこう書いてある。
非絶対モジュール名を解決するためのベースディレクトリ

要するに絶対パス指定じゃない場合、どこを基準のフォルダにします？
というパラメータ

例) こんな感じのフォルダ構成だったとして

project_root
  ┣━ src
  ┃  ┣━ index.ts
  ┃  ┗━ foo.ts
  ┣━ hoge.ts
  ┗━ tsconfig.json

baseUrlに**./**を指定した場合

tsconfig.json

{
  "compilerOptions": {
    "baseUrl":"./",
  }
}

モジュールを指定する際、以下のようになる。

index.ts

import * from 'foo';      // これはNG
import * from 'src/foo';  // これはOK
import * from './foo';    // 相対パス指定もOK

まとめ

というわけでbaseUrlはパスの起点が書かれていない場合に使われる。

他にもStorybookを使おうとすると、baseUrlを指定しろと言われたり
tsconfig.jsonのpaths(エイリアスの設定)などを使う場合もbaseUrlを指定しとかないといけない。

おわり

他にもこんな動きがある、それ間違ってるなどあれば
コメントで指摘お願いします。