TypeScriptの型定義ファイルについて

学んだこと

型定義ファイル

• JS のコードに型情報を追加するファイル
• なぜ必要なのか
  • JS には型情報がなく、TS から JS のライブラリを使用したい場合 TS が認識できない
  • この関数はこういう型ですと教える役割がある
• 多くのライブラリは最初から型定義が用意されている
  • 用意されていなければ、@types とついているパッケージを別で読み込む必要がある

アンビエントモジュール宣言とモジュール拡張

• アンビエントモジュール宣言
  • あるモジュールが存在していることだけを TS に伝える宣言のこと
  • 中身は書かず、存在していることだけ
  • 型がない JS ライブラリを使うときに使用する
• モジュール拡張
  • すでにある型やモジュールに機能を追加すること
  • 主にライブラリや既存コードを拡張したいときに使用する
  • ライブラリや型をカスタマイズしたいときに使用する

トリプルスラッシュディレクティブと types

• トリプルスラッシュディレクティブ
  • ///から始まる特殊なコメントで、他の型定義ファイルなどを読み込むための命令
  • 昔のコードや特別なケースで使われるため、今ではあまり使われない。
  • 多くの場合、ES モジュールと tsconfig.json で管理することができるため。

/// <reference path="./utils.d.ts" />

const result = add(1, 2); // utils.d.ts にある関数 `add` を使える

• よく使う書き方

/// <reference path="..." />	他の .ts や .d.ts ファイルを読み込む
/// <reference types="..." />	型定義パッケージ（例：@types/node）を読み込む
/// <reference lib="..." />	標準ライブラリ（例：es2015）を明示的に使う

types オプション

• どの型定義パッケージをプロジェクトで使用するか設定ファイルで管理するためのもの
• 下記の場合、@types/nodeと@types/jestが有効になり補完が効くようになる。

// tsconfig.json の例
{
  "compilerOptions": {
    "types": ["node", "jest"]
  }
}

// 一切のグローバル型定義を使いたくない場合
{
  "compilerOptions": {
    "types": []  // 明示的に何も読み込まない
  }
}