Latihan 1: Proyek: Type-Safe App — TypeScript

Latihan 1 dari materi Proyek: Type-Safe App di TypeScript — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi fungsi filterByKey di kode awal. Tanda tangannya masih longgar, function filterByKey<T>(items: T[], key: keyof T, value: any): T[]: value: any menerima nilai apa saja.

Kembalikan isi items yang nilai item[key]-nya sama persis (===) dengan value. Pakai items.filter(...), dan baca isiannya dengan kurung siku, item[key].
Perketat tanda tangannya jadi function filterByKey<T, K extends keyof T>(items: T[], key: K, value: T[K]): T[], supaya nilai yang salah tipe ditolak TypeScript.

Dua pemanggilan ini dicek, dan hasilnya harus persis:

filterByKey([{ a: 1 }, { a: 2 }, { a: 1 }], "a", 1) mengembalikan [{ a: 1 }, { a: 1 }]
filterByKey([{ k: "a", n: 1 }, { k: "b", n: 2 }], "k", "b") mengembalikan [{ k: "b", n: 2 }]

TypeScript memeriksa kodemu dulu (mode strict, seperti tsc --noEmit), dan latihannya baru lolos kalau gak ada error tipe. Selain dua hasil tadi, yang dicek dari teks kodemu: ada fungsi filterByKey, ada K extends keyof T, value-nya bertipe T[K], dan ada anotasi tipe.

Hint

Array punya method filter yang menyimpan isi yang lolos syarat: nilai di isian bernama key sama persis dengan value. Lalu perketat tanda tangannya: kuncinya jadi type parameter K yang dibatasi keyof T, dan value mengikuti type isi kunci itu.
Tanda tangannya: function filterByKey<T, K extends keyof T>(items: T[], key: K, value: T[K]): T[]. Isinya: return items.filter((item) => ...), bandingkan item[key] dengan value memakai ===.
function filterByKey<T, K extends keyof T>(items: T[], key: K, value: T[K]): T[] { return items.filter((item) => item[key] === value) }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Proyek: Type-Safe App — TypeScript

Hint

Memperbarui Aplikasi