JavaScript モジュールを TypeScript から読み込む

npmのリポジトリで提供されている多くのパッケージは、TypeScriptで書かれているものでも、TypeScriptのままで配布されているものはあまりありません。

(理由は以下)

JavaScript環境との相互運用が簡単である。
.tsファイルが配布パッケージの中にあるとコンパイラがそれを見つけてアプリと一緒に毎回コンパイルしてしまう。

JavaScriptにコンパイル済みのファイルと、『宣言ファイル(Declaration File)』というTypeScriptの型情報を定義したファイルをパッケージングして配布されることが一般的です。

TypeScriptから読み込めるようにJavaScriptのモジュールを作る

tsファイルから型情報が付加されたjsモジュールを作成する流れ

sailrmoon-transform.tsにエクスポート文を記述します。
tsc -d コマンドでエクスポートするファイルをjsファイルにコンパイルすると同時にd.tsという型定義ファイルを生成します。(コンパイルしたjsファイルと型定義のd.tsファイルの二つが生成されます)
元のtsファイルを削除します。
main.jsでコンパイル後のjsファイルをインポートすると、d.tsファイルも同名のファイル名という事で関連づけられているため、型定義も反映されます。

declare

TypeScriptからJavaScriptモジュールをただインポートすると、実装だけがあって型がない状態になります。そこでTypeScriptのコンパイラに、こういう変数とか関数がこういう型で存在していることを伝えて、宣言空間にそれらを定義するための構文がdeclareです。

今回書籍での例で生成されるd.tsファイル

declare class Brooch {
    pentagram: string;
}
declare type Compact = {
    silverCrystal: boolean;
};
declare class CosmicCompact implements Compact {
    silverCrystal: boolean;
}
declare class CrisisCompact implements Compact {
    silverCrystal: boolean;
    moonChalice: boolean;
}
declare function transform(); void;
declare function transform(item: Brooch): void;
declare function transform(item: Compact): void;
export { transform, Brooch, CosmicCompact, CrisisCompact };