オブジェクト配列
Work をまとめて Work[]
作品は普通、1 件ではなく一覧で扱います。配列の型は要素の型に [] を付けるだけなので、Work の配列は Work[] です。
TypeScript
interface Work {
readonly id: number;
title: string;
published: boolean;
url?: string;
}
const works: Work[] = [
{ id: 1, title: "プロフィールサイト", published: true },
{ id: 2, title: "自己紹介カード", published: false },
{ id: 3, title: "スキル一覧の表", published: true },
];要素が 1 つでも形を外れていれば、その要素の位置でエラーになります。どの行が悪いのかまで教えてくれるので、データの取り違えを一覧単位で防げます。
取り出した要素にも型が付く
Work[] から取り出したものは Work です。だから続けてドットで読めます。
TypeScript
const first = works[0];
console.log(first.title); // プロフィールサイトmap と filter が効くようになる
第3章で見たコールバックの型が、ここで本領を発揮します。
TypeScript
const titles: string[] = works.map((work) => work.title);works が Work[] なので、コールバックの work は書かなくても Work に決まります。work.title は string なので、map の結果は string[] と推論されます。ここで work.titel と打てば止まりますし、結果を number[] に入れようとしても止まります。
filter も同じです。
TypeScript
const published: Work[] = works.filter((work) => work.published);filter は要素を選ぶだけなので、結果の型は元と同じ Work[] です。この 2 つをつなぐと、一覧の加工がひととおり書けます。
TypeScript
const publishedTitles: string[] = works
.filter((work) => work.published)
.map((work) => work.title);React で作品カードを並べるときに書くのは、まさにこの形です。
手を動かす
演習では Work[] を受け取り、公開中の作品だけのタイトル一覧を返す関数を書きます。
要件
publishedTitlesの引数にWorkの配列を表す型を付けるpublishedが true の作品だけを残す- 残した作品の
titleだけを並べた配列を返す
入出力例
publishedTitles([{"id":1,"published":true,"title":"プロフィールサイト"},{"id":2,"published":false,"title":"自己紹介カード"},{"id":3,"published":true,"title":"スキル一覧の表"}]) → ["プロフィールサイト","スキル一覧の表"]
publishedTitles([{"id":1,"published":true,"title":"プロフィールサイト"},{"id":2,"published":true,"title":"自己紹介カード"}]) → ["プロフィールサイト","自己紹介カード"]
publishedTitles([{"id":2,"published":false,"title":"自己紹介カード"}]) → []
publishedTitles([]) → []
publishedTitles([{"id":3,"published":true,"title":"スキル一覧の表","url":"https://example.com/skills"}]) → ["スキル一覧の表"]ヒント
編集 ゆめさく編集部