[TypeScript]ライブラリの型定義を拡張する

pixi.js

ライブラリの型定義を拡張する方法

TypeScriptでライブラリの型定義が何らかの事情で足りておらず、自分で必要な型を加える必要がある場合の対処法。
私はpixi.jsSpriteを使用したときに以下のように型エラーが出たので、調整を加えることにしました。

before-modify

公式ドキュメントbuttonModeは記載されているので、ライブラリの不備かと思っています

結論: *.d.tsを作成する

結論から書くとsprite.d.tsを作成し、以下のように記載することで型エラーを防ぐことができます。

import * as PIXI from 'pixi.js';

declare module 'pixi.js' {
    interface Sprite {
        buttonMode: boolean;
    }
}

after-modify

型定義ファイルについて

先ほど作成したsprite.d.tsは型定義ファイルと呼ばれるもので、名前の通りプロジェクトのオブジェクトに対して型を宣言することができます。

アンビエント型宣言(declare) を使用すると、既存の一般的なJavaScriptライブラリを安全に使用したり、JavaScript/CoffeeScript/など、他のJavaScriptにコンパイルされるプロジェクトを TypeScript に段階的に移行することができます。
TypeScriptDeepDive

declareはアンビエント宣言と呼ばれるもので、他のファイルに存在する変数について説明を加えることができます。

例えばprocessはnodeで実行している際に使えるグローバル変数ですが、これに情報を付け加えたい場合

interface Process {
    exit(code?: number): void;
}
declare var process: Process;

と書くことでprocessの型を更新できます。

この機能を用いて、今回はPixijs.Spriteを拡張しました。

コメント

タイトルとURLをコピーしました