オブジェクト配列｜コードで実践

Work をまとめて Work[]

作品は普通、1 件ではなく一覧で扱います。配列の型は要素の型に [] を付けるだけなので、Work の配列は Work[] です。

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 です。だから続けてドットで読めます。

const first = works[0];
console.log(first.title); // プロフィールサイト

map と filter が効くようになる

第3章で見たコールバックの型が、ここで本領を発揮します。

const titles: string[] = works.map((work) => work.title);

works が Work[] なので、コールバックの work は書かなくても Work に決まります。work.title は string なので、map の結果は string[] と推論されます。ここで work.titel と打てば止まりますし、結果を number[] に入れようとしても止まります。

filter も同じです。

const published: Work[] = works.filter((work) => work.published);

filter は要素を選ぶだけなので、結果の型は元と同じ Work[] です。この 2 つをつなぐと、一覧の加工がひととおり書けます。

const publishedTitles: string[] = works
  .filter((work) => work.published)
  .map((work) => work.title);

React で作品カードを並べるときに書くのは、まさにこの形です。

手を動かす

演習では Work[] を受け取り、公開中の作品だけのタイトル一覧を返す関数を書きます。

オブジェクト配列

Work をまとめて Work[]

取り出した要素にも型が付く

map と filter が効くようになる

手を動かす

要件

入出力例

ヒント

メモ