つくる - 汎用フィルタ関数

第6章でやったことを 1 本にする

この回で新しい知識は出てきません。第6章で覚えたことだけを組み合わせて、汎用のフィルタ関数を仕上げます。

使うのは次の 3 つです。1 つ目は型引数の宣言です。2 つ目は、引数と戻り値の両方に同じ型引数を使うことです。3 つ目は extends による制約です。

作る相手

published を見て、指定した公開状態の要素だけを残す関数です。作品にも、下書きにも、published を持つものなら何にでも使えるようにします。

const works = [ { id: 1, title: "プロフィールサイト", published: true }, { id: 2, title: "自己紹介カード", published: false }, ]; filterBy(works, true); // [{ id: 1, title: "プロフィールサイト", published: true }]

型引数を使い切る

戻り値を object[] にしてしまうと、返ってきた要素の title が読めなくなります。受け取った型をそのまま返す、という関係を型引数で表してください。

const open = filterBy(works, true); open[0].title; // ここが読めることがゴール

引数を T[]、戻り値を T[] と書けば、呼び出しごとに T が決まり、titleid もそのまま残ります。

中で使うものだけ要求する

関数の中で読むのは published だけです。だから制約も published だけを要求します。

<T extends { published: boolean }>

titleid まで要求すると、使える相手が減ります。制約は必要な分だけにする、が原則です。

手を動かす

引数の型、制約、戻り値の型、そして組み立て用の配列の型を書いて、処理を完成させてください。書き上がったら、返ってきた配列の要素から title が読めるか、頭の中で確かめてみてください。読めなければ、どこかで型引数が途切れています。

要件

  1. 型引数を 1 つ宣言し、published が boolean である型だけを受け取る制約を付ける
  2. 第 1 引数は宣言した型引数の配列、戻り値も同じ型引数の配列にする
  3. 第 2 引数は boolean にする
  4. 受け取った配列は書き換えず、新しい配列を返す
  5. 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"}]

ヒント

生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア
編集 LuaGate編集部
main.ts
main.ts
学習モード

メモ

つくる - 汎用フィルタ関数

⌘S で保存