こんにちは。TypeScriptの世界へようこそ。
「型安全」という響きには憧れるけれど、いざ環境構築を始めると `tsconfig.json` の呪文のような設定項目に圧倒されて、「もう帰りたい…」なんて思ったことはありませんか？大丈夫です。みんな最初はそこで立ち止まります。
今日は、そんな `tsconfig.json` の中でも特に「え、結局どれを読み込めばいいの？」と迷子になりがちな `typeRoots` と `types` という設定について、お話ししましょう。
—
TypeScriptの「型定義」は、いわば「取扱説明書」
まず、イメージしてみてください。皆さんが使っているライブラリ（`node_modules` に入っているもの）は、高性能な「家電製品」です。でも、そのままだとボタンが多すぎて使い方がわかりませんよね。
TypeScriptにおける「型定義（`@types`）」は、その家電の「日本語取扱説明書」です。これを読み込むことで、エディタ（VS Codeなど）が「あ、この関数は数値を渡すんだな」と教えてくれるようになります。
普段は TypeScript が気を利かせて勝手に読み込んでくれますが、時々「勝手に全部読み込まれると邪魔なんだけど…」とか「自分で書いたこのファイルを、特別な説明書として読んでほしい！」という場面が出てくるんです。
「typeRoots」：説明書が置いてある「本棚」を指定する
`typeRoots` は、TypeScriptに対して「型定義ファイル（説明書）は、このフォルダの中を探してね！」と指示する場所です。
デフォルトでは `node_modules/@types` という「本棚」を見に行くようになっていますが、もし皆さんがプロジェクト内に `types` というフォルダを作って、そこに独自の型定義を置いたなら、TypeScriptに教えてあげないといけません。
{
“compilerOptions”: {
// 複数の本棚を指定したい場合は、配列で並べます
“typeRoots”: [
“./node_modules/@types”, // これを忘れると標準の型も読み込めなくなるので注意！
“./src/types” // 自作の「説明書」が入っている本棚も追加
]
}
}
ここが落とし穴！
`typeRoots` を書くと、TypeScriptは「指定した場所だけ」を見るようになります。つまり、デフォルトの `@types` を書き忘れると、標準ライブラリの型すら認識されなくなって、画面が真っ赤っ赤になります。「あれ、さっきまで動いてたのに！」という時は、ここを疑ってみてくださいね。
—
「types」：本棚の中から「特定の1冊だけ」選ぶ
次に `types` です。こちらはもっと限定的で、「この本棚の中から、この説明書だけを読み込んで！」という指名買いのような設定です。
例えば、プロジェクト全体で `jest`（テスト用ツール）の型定義は読み込みたくないけれど、テストファイルの中だけは必要、という時に使います。
{
“compilerOptions”: {
// node_modules/@types 内にあるパッケージのうち、これだけを読み込む
“types”: [
“node”,
“jest”
]
}
}
これを設定すると、`types` に書かれていない他のパッケージの型は、プロジェクト全体からは見えなくなります。「名前の衝突」を防ぎたい時や、厳格に環境を制御したい時には、この「指名買い」が非常に役に立つんです。
—
現場のチーフアーキテクトからのアドバイス
実務の現場では、これらをむやみに書き換えることはあまりありません。基本的には TypeScript が自動でやってくれることに任せるのが一番平和です。
しかし、もし皆さんが以下のような状況に陥ったら、思い出してください。
1. 「自分で作った型ファイルを、プロジェクト全体で使いたいのに認識してくれない」
→ `typeRoots` でそのフォルダを指定してあげましょう。
2. 「使っていないはずのライブラリの型が邪魔で、エディタの補完がごちゃごちゃする」
→ `types` で必要なものだけを絞り込んでみましょう。
まとめ：TypeScriptと仲良くなるために
設定ファイルは「難しいルール」ではなく、TypeScriptという優秀な秘書への「お願いごとリスト」です。
- `typeRoots` は「ここを探して！」という本棚の場所。
- `types` は「これだけ読んで！」という指名買い。
最初はうまくいかなくても大丈夫。真っ赤なエラーメッセージは「ここ、もうちょっと詳しく教えてくれると嬉しいな！」という TypeScript からのメッセージです。ゆっくり、一つずつ紐解いていきましょう。
皆さんの TypeScript ライフが、少しでも快適なものになりますように！また何かあればいつでも聞いてくださいね。
コメント