つくる - Work型とProfile型
第4章で育てた形を確定させる
この回で新しい知識は出てきません。第4章で 1 つずつ足してきたものを、そのまま 1 か所にまとめます。
使ったのは次の 5 つです。interface、省略可能なプロパティ、readonly、interface と type の使い分け、ネストした型とオブジェクト配列です。
確定する Work 型
TypeScript
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 型
作者本人のプロフィールは、作品一覧を持ちます。
TypeScript
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 を受け取って一行の要約を返す関数を作ります。要約には名前、公開作品の件数、公開作品のタイトルを並べます。ここまでのレッスンで書いたコードを見返しながら組み立ててください。
要件
AuthorWorkProfileの 3 つの型を定義するWorkのidは readonly、urlは省略可能にする名前さん / 公開作品N件 / タイトル、タイトルの形で返す。タイトルの区切りは全角読点- 公開作品が 0 件のときは末尾を
まだ公開作品はありませんにする
入出力例
profileSummary({"bio":"Web制作を学習中です","id":1,"name":"ゆめさく","works":[{"author":{"name":"ゆめさく","nickname":"yume"},"id":1,"published":true,"title":"プロフィールサイト","url":"https://example.com/portfolio"},{"author":{"name":"ゆめさく","nickname":"yume"},"id":2,"published":false,"title":"自己紹介カード"},{"author":{"name":"ゆめさく","nickname":"yume"},"id":3,"published":true,"title":"スキル一覧の表"}]}) → "ゆめさくさん / 公開作品2件 / プロフィールサイト、スキル一覧の表"
profileSummary({"bio":"はじめました","id":2,"name":"たなか","works":[{"author":{"name":"たなか","nickname":"tanaka"},"id":1,"published":true,"title":"プロフィールサイト"}]}) → "たなかさん / 公開作品1件 / プロフィールサイト"
profileSummary({"bio":"準備中です","id":3,"name":"さとう","works":[{"author":{"name":"さとう","nickname":"sato"},"id":1,"published":false,"title":"自己紹介カード"}]}) → "さとうさん / 公開作品0件 / まだ公開作品はありません"
profileSummary({"bio":"これから作ります","id":4,"name":"すずき","works":[]}) → "すずきさん / 公開作品0件 / まだ公開作品はありません"
profileSummary({"bio":"Web制作を学習中です","id":5,"name":"ゆめさく","works":[{"author":{"name":"ゆめさく","nickname":"yume"},"id":1,"published":true,"title":"プロフィールサイト"},{"author":{"name":"ゆめさく","nickname":"yume"},"id":2,"published":true,"title":"自己紹介カード"},{"author":{"name":"ゆめさく","nickname":"yume"},"id":3,"published":true,"title":"スキル一覧の表"}]}) → "ゆめさくさん / 公開作品3件 / プロフィールサイト、自己紹介カード、スキル一覧の表"ヒント
編集 ゆめさく編集部