つくる - 汎用フィルタ関数
第6章でやったことを 1 本にする
この回で新しい知識は出てきません。第6章で覚えたことだけを組み合わせて、汎用のフィルタ関数を仕上げます。
使うのは次の 3 つです。1 つ目は型引数の宣言です。2 つ目は、引数と戻り値の両方に同じ型引数を使うことです。3 つ目は extends による制約です。
作る相手
published を見て、指定した公開状態の要素だけを残す関数です。作品にも、下書きにも、published を持つものなら何にでも使えるようにします。
TypeScript
const works = [
{ id: 1, title: "プロフィールサイト", published: true },
{ id: 2, title: "自己紹介カード", published: false },
];
filterBy(works, true);
// [{ id: 1, title: "プロフィールサイト", published: true }]型引数を使い切る
戻り値を object[] にしてしまうと、返ってきた要素の title が読めなくなります。受け取った型をそのまま返す、という関係を型引数で表してください。
TypeScript
const open = filterBy(works, true);
open[0].title; // ここが読めることがゴール引数を T[]、戻り値を T[] と書けば、呼び出しごとに T が決まり、title も id もそのまま残ります。
中で使うものだけ要求する
関数の中で読むのは published だけです。だから制約も published だけを要求します。
TypeScript
<T extends { published: boolean }>title や id まで要求すると、使える相手が減ります。制約は必要な分だけにする、が原則です。
手を動かす
引数の型、制約、戻り値の型、そして組み立て用の配列の型を書いて、処理を完成させてください。書き上がったら、返ってきた配列の要素から title が読めるか、頭の中で確かめてみてください。読めなければ、どこかで型引数が途切れています。
要件
- 型引数を 1 つ宣言し、
publishedが boolean である型だけを受け取る制約を付ける - 第 1 引数は宣言した型引数の配列、戻り値も同じ型引数の配列にする
- 第 2 引数は boolean にする
- 受け取った配列は書き換えず、新しい配列を返す
anyは使わない
入出力例
filterBy([{"id":1,"published":true,"title":"プロフィールサイト"},{"id":2,"published":false,"title":"自己紹介カード"},{"id":3,"published":true,"title":"スキル一覧の表"}], true) → [{"id":1,"published":true,"title":"プロフィールサイト"},{"id":3,"published":true,"title":"スキル一覧の表"}]
filterBy([{"id":1,"published":true,"title":"プロフィールサイト"},{"id":2,"published":false,"title":"自己紹介カード"}], false) → [{"id":2,"published":false,"title":"自己紹介カード"}]
filterBy([{"id":1,"published":true,"title":"プロフィールサイト"}], false) → []
filterBy([], true) → []
filterBy([{"published":false},{"published":true}], true) → [{"published":true}]
filterBy([{"id":1,"published":true,"title":"a"},{"id":2,"published":true,"title":"b"},{"id":3,"published":false,"title":"c"}], true) → [{"id":1,"published":true,"title":"a"},{"id":2,"published":true,"title":"b"}]ヒント
編集 ゆめさく編集部