TypeScript の baseUrl について調べた事

TypeScript の baseUrl とは何か？

module のインポート時に起点となるディレクトリを指定できる設定です。
詳細は公式ドキュメントを参照してください。

baseUrl を設定する

tsconfig.json の compilerOptions で設定します。
インポート時に起点となるディレクトリを tsconfig.json を配置しているディレクトリから相対パスで指定します。

tsconfig.json

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

baseUrl を設定した場合のモジュールのインポート

こちらのようなディレクトリ構成の場合...

.
├── dist
├── src
│   ├── components
│   │   └── index.ts
│   └── modules
│       └── module.ts
└── tsconfig.json

src/components/index.ts から src/modules/module.ts をインポートする時、通常は相対パスで指定すると思います。

src/components/index.ts

import moduleDemo from '../modules/module'

moduleDemo()

tsconfig.json で　baseUrl に ./src を指定しておくことで ./src を起点にモジュール解決をする事ができるので、こちらのように書く事ができます。

src/components/index.ts

import moduleDemo from 'modules/module'

moduleDemo()

まとめ

create-react-app で　React + TypeScript を書いている時に、コンポーネントのインポートを相対パスで書くの面倒くさいな...と思っていたらこの設定を見つける事ができました。
これでコンポーネントのインポートがちょっとは楽になるかなと思います。