TypeScriptでinterfaceのネストを表現する

Programming
目次

概要

TypeScriptを書いていて、interfaceを使ってオブジェクトやクラスの型を定義していると、interfaceの中にinterfaceを含めたいということがあります。

ここでは、そのようなinterfaceのネスト(入れ子ともいう)を表現する方法を紹介します。

環境

  • TypeScript 2.7

方法

ここでは例として、建物にコメントが属するようなデータをinterfaceで表現します。

建物のinterfaceをIBuilding、コメントのinterfaceをICommentのような名前とした場合、このようにして入れ子のインターフェースを定義できます。

interface IComment {
    content: string;
}

interface IBuilding {
    name: string;
    description: string;
    comment: IComment;
}

このようにして、定義できます。

もし、建物に複数のコメントがある場合、配列を使ってこのようにします。

interface IComment {
    content: string;
}

interface IBuilding {
    name: string;
    description: string;
    comment: IComment[];
}

この方法はすぐにできたのですが、私のソースコード中ではICommentはIBuildingからしか参照されていません。

なので、わざわざICommentを定義したくありません。

そこで色々と試してみると、次のように定義することもできました。

interface IBuilding {
    name: string;
    description: string;
    comment: {
        content: string;
    };
}

これで、わざわざICommentというinterfaceを定義する必要がなくなりました。

さらに、建物に複数のコメントがある場合は次のようにします。

interface IBuilding {
    name: string;
    description: string;
    comment: Array<{
        content: string;
    }>;
}

Array<>というものを使います。

これを見つけるまで、ものすごく苦労しました。

さいごに

Array<>というものを使って配列を定義するのを初めて知りました。

同じ悩みを持つ人の参考になれば幸いです。