つくる - Work型とProfile型

第4章で育てた形を確定させる

この回で新しい知識は出てきません。第4章で 1 つずつ足してきたものを、そのまま 1 か所にまとめます。

使ったのは次の 5 つです。interface、省略可能なプロパティ、readonly、interface と type の使い分け、ネストした型とオブジェクト配列です。

確定する Work 型

interface Author {
  name: string;
  nickname: string;
}

interface Work {
  readonly id: number;
  title: string;
  published: boolean;
  url?: string;
  author: Author;
}

id は作品を見分ける番号なので readonly、url は下書きには無いので省略可能、author は入れ子です。ここまでで決めた形と 1 文字も変わっていません。

追加する Profile 型

作者本人のプロフィールは、作品一覧を持ちます。

interface Profile {
  readonly id: number;
  name: string;
  bio: string;
  works: Work[];
}

works が Work[] なので、Profile を 1 つ渡せば、その人の作品もまとめて型が付いた状態で運べます。

これは持ち出す資産です

Work と Profile は、このコースの残りだけでなく、React 実践のコースでもそのまま使います。props の型も、fetch した結果の型も、この 2 つを起点に書いていきます。

だからプロパティ名を思いつきで変えないでください。title を name にしたり、published を isPublic にしたりすると、後のコースの説明と噛み合わなくなります。

手を動かす

演習では、上の 3 つの型を自分で書き、Profile を受け取って一行の要約を返す関数を作ります。要約には名前、公開作品の件数、公開作品のタイトルを並べます。ここまでのレッスンで書いたコードを見返しながら組み立ててください。

1. Author Work Profile の 3 つの型を定義する
2. Work の id は readonly、url は省略可能にする
3. 名前さん / 公開作品N件 / タイトル、タイトル の形で返す。タイトルの区切りは全角読点
4. 公開作品が 0 件のときは末尾を まだ公開作品はありません にする