GW に良い機会ということでリリースされたばかりの LIFF のプラグインシステムを利用して third-party プラグインの開発をしていた。

概ねドキュメント通りに利用することで、 Vue 2 時代のプラグインシステムのような書き心地でプラグインを開発できるのであまり躓くことはないが、 TypeScript に関する記述だけはどこを見てもあまり情報がない。

少し調べて解決できたので、同じようなシチュエーションに出会った人のために簡単に情報を残しておくことにした。

型定義方法

最終的に @line/liff の型定義とオフィシャルプラグインである LIFF Mock のソースコードを見に行った結果、このような形で定義するのが一番丸い様子だった。

type MyPlugin = {
  // ...
}

declare module '@line/liff' {
  interface Liff {
    $MyPlugin: MyPlugin;
  }
}

型定義上は @line/liff 側を拡張してやると良い。モジュールバンドラの設定で @line/liff はバンドル対象から ignore することになるため、それを前提として @line/liff 側を拡張して解決する。

また、 TypeScript を利用している時点で NPM 版を利用するユーザーが大半と予想されるものの、オフィシャルプラグインでは、 window.liff 側の定義も行っている。こちらはシンプルに declare global を利用する。

import liff from '@line/liff';

export type ActualLiff = typeof liff;

declare global {
  interface Window {
    liff: ActualLiff | undefined;
  }
}

一応 liff が読み込まれていない可能性を考慮して undefined で定義しておくことが推奨されている様子。

余談

LIFF プラグイン周りは、しばらくはオフィシャルのプラグインのコードを読みに行くのが一番はやく挙動を理解できそう。