Typing Reusable Frontend Logic
Memberi type pada helper frontend yang dipakai ulang, terutama return value sukses dan gagal.
Tujuan belajar
- Menjelaskan helper function sebagai boundary logic kecil
- Membuat typed result object untuk reusable function
- Menghindari return value yang berubah-ubah tanpa type jelas
Isi lesson
5 blok- 1.Helper yang dipakai ulang perlu kontrak kecilBelum selesaiWajib
- 2.Helper dengan success/error resultBelum selesaiWajib
- 3.Jangan sembunyikan kemungkinan gagalBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Helper yang dipakai ulang perlu kontrak kecil
WajibReusable frontend logic sering terlihat sederhana: format price, parse input, cari item, atau siapkan payload. Tetapi saat function dipakai di beberapa tempat, return value yang tidak jelas bisa menyebarkan bug.
Type pada parameter dan return value membuat helper punya kontrak kecil. Orang yang memakai helper tahu apa yang harus diberikan dan apa yang mungkin diterima kembali.
Bagian ini memengaruhi progres lesson.
Helper dengan success/error result
Wajibtype ParseResult<TValue> =
| { ok: true; value: TValue }
| { ok: false; message: string };
function parseQuantity(value: string): ParseResult<number> {
const quantity = Number(value);
if (Number.isNaN(quantity)) {
return { ok: false, message: "Jumlah belum valid." };
}
return { ok: true, value: quantity };
}Helper ini tidak melempar error untuk kasus input biasa. Ia mengembalikan result object yang harus dicek sebelum value dipakai.
Bagian ini memengaruhi progres lesson.
Peringatan
WajibJangan sembunyikan kemungkinan gagal
Jika helper bisa gagal, jangan return value palsu seperti `0` atau empty string tanpa alasan jelas. Result type membuat kemungkinan gagal terlihat di kode pemanggil.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususType reusable frontend result
Latihan mengetik helper reusable yang bisa mengembalikan success atau error result.
Tujuan awal: Fokus di tab TS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Reusable helper perlu parameter dan return type yang jelas.
- Result type cocok untuk helper yang bisa sukses atau gagal.
- Generic result menjaga data sukses tetap spesifik.
- Return value yang eksplisit lebih aman daripada nilai fallback yang membingungkan.
- Berikutnya, kamu akan merapikan type agar tetap readable.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Helper yang dipakai ulang perlu kontrak kecil.