TypeScript で オブジェクトの型定義を行う

TypeScript のメリットの1つに型定義があります。型を指定すればそれに付随する関数やプロパティの入力補完ができるようになります。

ここでは、オブジェクトの型定義の方法について紹介します。

1. interface でオブジェクトのメンバーと型を定義する

interface でオブジェクトのメンバーと型を定義することができます。ただし、実際の変数の宣言ではないため、値の設定などはできません。

たとえば、Movie というインタフェースを以下のとおり宣言してみます。


interface _IMovie {
    title: string,
    year: number,
    info: {
        actors: string[],
        country: string
    }
}

_IMovieというインタフェースは、以下のメンバーを持ちます。

  • title: 文字列
  • year: 数値
  • info: オブジェクト

infoは以下のメンバーを持ちます。

  • actors: 文字列配列
  • country: 文字列

2. インタフェースを指定して変数を宣言する。

さきほど作成した _IMovie インタフェースを利用して、movieという変数を宣言します。


let movie: _IMovie;

こうすることで、メンバーの自動補完ができるようになります。

3. インタフェースを指定して変数配列を宣言する。

さきほど作成した _IMovie インタフェースを 配列として利用して、moviesという配列変数を宣言します。


let movies: _IMovie[];

こうすることで、moviesを配列の変数として使用することができます。


movies.push({
    title: "abcde",
    year: 2019,
    info: {
        actors: ["aa", "bb"],
        country: "Japan"
    }
})

4. TypeScript の interface の公式ドキュメント

interface に関する公式ドキュメントは以下にあります。

https://www.typescriptlang.org/docs/handbook/interfaces.html

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です