オブジェクトの型｜コードで実践

形をそのまま書く

オブジェクトの型は、中カッコの中にプロパティ名と型を並べて書きます。値の形をそのまま写し取るような書き方です。

const profile: { name: string; workCount: number } = {
  name: "ゆめさく",
  workCount: 3,
};

区切りはセミコロンでもカンマでも動きます。1 行に収まらないときは改行して並べると読みやすくなります。

const profile: {
  name: string;
  workCount: number;
  isPublic: boolean;
} = {
  name: "ゆめさく",
  workCount: 3,
  isPublic: true,
};

足りないプロパティも余分なプロパティも止まる

形を宣言しておくと、抜けと入れすぎの両方が指摘されます。

const a: { name: string; workCount: number } = {
  name: "ゆめさく",
};
// エラー Property 'workCount' is missing in type '{ name: string; }'.

const b: { name: string } = {
  name: "ゆめさく",
  workCount: 3,
};
// エラー Object literal may only specify known properties.

プロパティ名の打ち間違いは、後者のエラーとして出てきます。workCount を workcount と書いてしまう事故が、実行前に見つかるということです。

関数の引数に書くと効きめが大きい

いちばん役に立つのは、関数の引数に形を書いたときです。

function headline(profile: { name: string; workCount: number }): string {
  return profile.name + "（" + profile.workCount + "件）";
}

こう書いておくと、関数の中で profile. と打った時点で name と workCount が候補に出ます。中で使えるプロパティがはっきりするので、渡ってくるデータを想像しながら書かずに済みます。

同じ形を何度も書くのは面倒ですが、それを解消する方法はこの章の後半で扱います。まずは形をそのまま書くことに慣れてください。

手を動かす

演習では、プロフィールのオブジェクトを 1 つ受け取って、見出し用の一行を返す関数を仕上げます。処理はすでに書いてあるので、引数にオブジェクトの型を書き足してください。中で使われているプロパティを読めば、必要な形が分かります。

オブジェクトの型

形をそのまま書く

足りないプロパティも余分なプロパティも止まる

関数の引数に書くと効きめが大きい

手を動かす

要件

入出力例

ヒント

メモ