オブジェクトとインターフェース

オブジェクトの形を正確な型で記述し、それからインターフェースで再利用可能にしましょう。

8 分 · 3 問

JavaScriptでは、オブジェクトは関連するいくつかの情報をキーと値のペアとしてまとめます。まるでカードのように、本にはタイトルとページ数があります。TypeScriptでは、オブジェクトの正確な形を記述できます。どんなプロパティを含み、それぞれがどんな型なのかを、です。

const book: { title: string; pages: number } = {
  title: "The Little Prince",
  pages: 96,
};

console.log(book.title); // "The Little Prince"

毎回その形を書き出すのは、すぐに繰り返しばかりになってしまいます。インターフェースはその形に名前を与え、どこでも再利用できるようにします。interface キーワードに続けて名前（慣習として大文字始まり）を書き、それからプロパティとその型のリストを書いて宣言します。

interface Recipe {
  name: string;
  servings: number;
  isVegetarian: boolean;
}

const pancakes: Recipe = {
  name: "Pancakes",
  servings: 4,
  isVegetarian: true,
};

インターフェースのすべてのプロパティは、デフォルトでは必須です。servings を忘れるとエラーになります。プロパティを省略可能にするには、その名前のすぐ後ろにクエスチョンマーク ? を付けます。そうすれば、そのプロパティがあってもなくてもオブジェクトを作れます。

interface Contact {
  name: string;
  phone: string;
  email?: string; // optional thanks to the ?
}

const alice: Contact = {
  name: "Alice",
  phone: "0601020304",
}; // allowed: email can be omitted

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. TypeScriptにおいて、インターフェースは何のためのものですか。
   • オブジェクトの形を記述し、それを再利用するため
   • Webページを作るため
   • 関数をより速く動かすため
   • サーバーにデータを保存するため
2. email?: string のクエスチョンマークは何を意味しますか。
   • email プロパティは必須である
   • email プロパティは省略可能である
   • email プロパティは常に空である
3. Recipe として型付けされたオブジェクトに name プロパティが欠けています。何が起こりますか。
   • TypeScriptが実行前にエラーを報告する
   • 実行時に警告なしでプログラムがクラッシュする
   • TypeScriptが自動的にプロパティを追加する