Intermediate · Level 6: TypeScriptIntermediate50 menitBahasa Indonesia

Generics Dasar

Membuat type dan helper sederhana yang reusable tanpa kehilangan informasi type.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami generic sebagai type parameter
Membuat reusable result type sederhana
Menggunakan generic tanpa membuat type terlalu abstrak

TypeScriptGenericsReusable Types

Isi lesson

6 blok

1.
Reusable tanpa kehilangan typeBelum selesaiWajib
2.
Result type sederhanaBelum selesaiWajib
3.
Jangan membuat generic sebelum ada kebutuhanBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Reusable tanpa kehilangan type

Wajib

Kadang kamu ingin membuat type yang bisa dipakai untuk berbagai data. Misalnya result API bisa sukses dengan data apa saja: user, lesson, product, atau profile.

Generic memberi type parameter. Kamu bisa membayangkannya seperti placeholder type yang akan diisi saat type atau function dipakai.

Bagian ini memengaruhi progres lesson.

Result type sederhana

Wajib

type ApiResult<TData> =
  | { ok: true; data: TData }
  | { ok: false; error: string };

type Lesson = {
  title: string;
  minutes: number;
};

const result: ApiResult<Lesson> = {
  ok: true,
  data: {
    title: "Generics Dasar",
    minutes: 45,
  },
};

`TData` adalah type parameter. Saat dipakai sebagai `ApiResult<Lesson>`, data sukses harus mengikuti shape Lesson.

Bagian ini memengaruhi progres lesson.

Peringatan

Wajib

Jangan membuat generic sebelum ada kebutuhan

Generic berguna saat pola yang sama dipakai untuk beberapa type. Jika hanya dipakai sekali dan membuat kode lebih sulit dibaca, type biasa sering lebih baik.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Create generic API result

Latihan membuat reusable result type dengan generic type parameter.

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.

5 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa fungsi `TData` pada `type ApiResult<TData>`?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Generic memakai type parameter seperti `TData`.
Generic membantu membuat type atau function reusable.
Generic tetap harus mendukung readability.
Gunakan generic saat pola yang sama benar-benar dipakai beberapa kali.
Berikutnya, kamu akan memakai utility types untuk mengambil atau mengubah shape object yang sudah ada.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Reusable tanpa kehilangan type.

Memuat progres Review module