2022年4月14日 りあクト！ 第4章 型定義ファイルはどのように探索されるか(p.215~)
npmのパッケージに含まれている型定義ファイルをプロジェクトに関連付ける方法は大きく分けて２つあります。
１. JavaScriptファイルと同じ階層に同じ名前で.d.ts拡張子の型定義ファイルを置く
例を挙げる『ky』というライブラリは、パッケージ内で同じ階層に同名のjsファイルと.d.tsファイルがあるため、型定義も読み込まれます。
https://github.com/sindresorhus/ky
node_modules/ky
├─ index.d.ts ├─ index.js ├─ license ├─ package.json ├─ readme.md ├─ umd.d.ts └─ umd.js
２. パッケージ配下のpackage.jsonに"types"または"typings"プロパティで型定義ファイルのパスを指定する
例を挙げると『Immer』というイミュータブルなオブジェクトツリーを扱うためのライブラリがこの形式を取っています。 https://github.com/immerjs/immer/blob/master/package.json
package.json
{
"name": "immer",
"version": "9.0.0-beta.1",
"description": "Create your next immutable state by mutating the current one",
"main": "dist/index.js",
"module": "dist/immer.esm.mjs",
"exports": {
".": {
"import": "./dist/immer.esm.mjs",
"require": "./dist/index.js"
},
"./*": "./*"
},
"umd:main": "dist/immer.umd.production.min.js",
"unpkg": "dist/immer.umd.production.min.js",
"jsdelivr": "dist/immer.umd.production.min.js",
"jsnext:main": "dist/immer.esm.mjs",
"react-native": "dist/immer.esm.mjs",
"source": "src/immer.ts",
"types": "./dist/immer.d.ts",
.
.
- typesプロパティに型定義ファイルをパス付きで設定してあります。
- typingsというプロパティ名でも可能です。
- パッケージのルートディレクトリに
index.d.tsという名前で配置すればこの設定は省略可能です。(多くの場合、このファイルがある上でpackage.jsonの設定も省略されていないようです)
公式型定義ファイルが配布されていない場合
有志の第三者の方が作ってくれていることが多く、まとめて公開されている『Definitely Typed』があります。
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types
上記の大元のリポジトリから直接、型定義ファイルを探すのではなく、いくつかの検索方法があります。
目当ての型定義ファイルが決まっていて検索する方法
- 『TypeSearch』で検索をする方法
yarn info @types/任意のファイル名で検索する方法
npmで検索する方法
TypeScriptがnode_modules/@typesディレクトリから(型定義ファイルがインストールされている前提)自動で検索し対象のパッケージと関連付けしてくれます。
第三者の方が作ってくれた型定義ファイルも存在しない場合
src/ディレクトリに任意の名前で.d.ts ファイルを配置します。 今回はsrc/types.d.ts というファイルでフォーマットを作ります。
declare module awesomelib { export type Amazing = { ... }; declare function fabulous(arg: Amazing): void; . . export default fabulous; }
import fabulours from 'awesomelib'でパッケージがインポートされるとこの型定義が適用されます。
型定義ファイルの優先順位
型定義ファイルには優先順位が存在します。以下の順番 で型定義が適用されます。
- ローカルでの型宣言
- モジュールがパッケージ内に持っている型ファイル
- node_modules/@types配下の型ファイル
復習
ビルドとコンパイルの違い
コンパイルとは、"ソースコードをコンピュータが認識できるオブジェクトコードに変換すること"です。
ビルドとは、"コンパイルしたファイルを一つにまとめ、実際に実行まですること"です。
node_modules
package.jsonを元にしてインストールされた各種パッケージが配置されるディレクトリを指します。
