この記事を読んだ後に理解できること

.d.tsファイルの役割

.d.tsファイルとは

型定義専用のファイルになります。

このファイルを使って型を定義する機会としては、外部のパッケージ（npm等）をインストールしたときに型定義ファイルがない場合等です。

npmパッケージは、型定義ファイルが同梱されていないことがあります。

そのような場合に.d.tsファイルを使うことで、コードチェックや補完を行うことができます。

具体例

決済サービスで有名な「PAY.JP」をクライアントサイドで使う場合、payjp.jsというjavascriptライブラリを使います。

アプリケーションにスクリプトタグを追加することでpayjp.jsを使用することができます。
（npmパッケージとしてはインストールすることができません。）

<script src="https://js.pay.jp/v2/pay.js"></script>

このスクリプトタグを使うことでPayjpというグローバル変数を使用することができます。

このグローバル変数であるPayjpに公開鍵を渡すことで戻り値として、Payjpインスタンスを得ることができます。

このPayjpインスタンスを使って各種API操作を行うことができます。

Payjpはグローバル変数なので、windowオブジェクトからアクセス可能なのですが、型が定義されていないので、コンパイルエラーになります。

const payjp = window.Payjp('abc1242nfjkefnrej')

コンパイルするとwindowオブジェクトにPayjpなんてプロパティは存在しないとエラーがでます。

なので.d.tsのファイルにwindowオブジェクト型にプロパティとしてPayjpを追加してあげます。

payjp.d.ts

declare global {
  interface Window {
    Payjp: any;
  }
}

こうすることでコンパイルエラーにならずPayjpインスタンスを生成することができます。

さいごに

技術書を見ると.d.tsファイル内に通常の型を定義している例も散見されます。

user.d.ts

export type User = {
  name: string
  email: string
}

tsconfig.jsonで "skipLibCheck": true, が定義されていると.d.tsのコンパイルエラーは無視されてしまいます。

なので通常の型であれば、tsファイルに記載したほうがいいかもしれません。

TypeScriptの型定義ファイル「.d.ts」とは？

目次