module-augmentation

モジュール拡張を使って型を改善する

概要

モジュール拡張を使うと、サードパーティライブラリを含む既存のモジュールに宣言を追加できます。ライブラリの型が不完全な場合や、プラグインでライブラリを拡張する場合に便利です。declare moduleを使って、既存のモジュールにプロパティ、メソッド、型を追加します。

このスキルを使う場面

• サードパーティの型を拡張する
• 既存のインターフェースにプロパティを追加する
• コア型を拡張するプラグイン
• 宣言のマージが必要な場合
• グローバル型を拡張する

絶対ルール

モジュール拡張を使って既存の型に追加します。同じモジュール名を宣言し、宣言を追加します。

例

// Adding to an existing module
// types/vue.d.ts
declare module 'vue' {
  export interface ComponentCustomProperties {
    $myProperty: string;
    $myMethod(): void;
  }
}

// Now Vue components have these properties
// this.$myProperty works with type safety

// Augmenting global types
declare global {
  interface Window {
    myLib: MyLibrary;
  }
}

// Now window.myLib is typed

参考資料

• Dan Vanderkam 著『Effective TypeScript』第2版
• 項目71：モジュール拡張を使って型を改善する