ネストした型
オブジェクトの中のオブジェクト
作品に、誰が作ったかの情報を持たせます。作者は名前とニックネームの 2 つを持つので、それ自体がオブジェクトになります。
型は入れ子にして書けます。
TypeScript
interface Work {
readonly id: number;
title: string;
published: boolean;
author: { name: string; nickname: string };
}値のほうも同じ形で入れ子になります。
TypeScript
const work: Work = {
id: 1,
title: "プロフィールサイト",
published: true,
author: { name: "ゆめさく", nickname: "yume" },
};読むときはドットをつないでいきます。
TypeScript
console.log(work.author.nickname); // yume内側にも名前を付ける
入れ子をそのまま書くと、階層が深くなるほど読みにくくなります。内側にも名前を付けて分けるほうが扱いやすくなります。
TypeScript
interface Author {
name: string;
nickname: string;
}
interface Work {
readonly id: number;
title: string;
published: boolean;
author: Author;
}意味は上と同じですが、Author だけを引数に取る関数が書けるようになります。
TypeScript
function authorLabel(author: Author): string {
return author.name + "（" + author.nickname + "）";
}型に名前を付けるかどうかの目安は、その形が 2 か所以上で登場するか、単独で関数に渡したくなるか、です。どちらかに当てはまったら切り出します。
入れ子でも検査は届く
内側の打ち間違いも、ちゃんと止まります。
TypeScript
work.author.nickname = 123;
// エラー Type 'number' is not assignable to type 'string'.
console.log(work.auther.name);
// エラー Property 'auther' does not exist on type 'Work'.手を動かす
演習では Author を切り出して Work に組み込み、作者名まで含む一行を返す関数を書きます。ここで決めた author の形も、後の章でそのまま使い続けます。
要件
Authorをnameとnicknameの 2 プロパティで定義するWorkにauthorプロパティを足し、その型をAuthorにするタイトル / 名前（ニックネーム）の形で返す。カッコは全角を使う
入出力例
workByLine({"author":{"name":"ゆめさく","nickname":"yume"},"id":1,"published":true,"title":"プロフィールサイト"}) → "プロフィールサイト / ゆめさく（yume）"
workByLine({"author":{"name":"たなか","nickname":"tanaka"},"id":2,"published":false,"title":"自己紹介カード"}) → "自己紹介カード / たなか（tanaka）"
workByLine({"author":{"name":"さとう","nickname":"sato"},"id":3,"published":true,"title":"スキル一覧の表","url":"https://example.com/skills"}) → "スキル一覧の表 / さとう（sato）"ヒント
編集 ゆめさく編集部