FluentStack

Utility Types Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 6: TypeScriptIntermediate50 menitBahasa Indonesia

Utility Types Dasar

Membaca dan memakai Pick, Omit, Partial, dan Record dalam kasus frontend sederhana.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membaca utility type dasar
  • Menggunakan Pick dan Omit untuk mengambil atau mengecualikan property
  • Menggunakan Partial dan Record dalam kasus sederhana
TypeScriptUtility TypesObject Types

Isi lesson

5 blok
  1. 1.
    Gunakan type yang sudah adaBelum selesaiWajib
  2. 2.
    Utility types pada ProductBelum selesaiWajib
  3. 3.
    Pakai utility type kalau niatnya jelasBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

Gunakan type yang sudah ada

Wajib

Saat object type mulai banyak, kamu tidak selalu perlu menulis type baru dari nol. TypeScript punya utility types untuk membuat type baru dari type yang sudah ada.

Di module ini, cukup pahami empat utility type yang sering terlihat: `Pick`, `Omit`, `Partial`, dan `Record`. Pakai dalam kasus yang jelas, bukan untuk membuat type terlihat pintar.

Bagian ini memengaruhi progres lesson.

Utility types pada Product

Wajib
ts
type Product = {
  id: number;
  title: string;
  price: number;
  description: string;
  isPublished: boolean;
};

type ProductCard = Pick<Product, "id" | "title" | "price">;
type ProductDraft = Partial<Product>;
type ProductInput = Omit<Product, "id">;
type ProductLabelMap = Record<string, string>;

Pick mengambil sebagian property. Omit mengecualikan property. Partial membuat semua property menjadi optional. Record membuat object map dengan key dan value type tertentu.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Pakai utility type kalau niatnya jelas

Utility type membantu mengurangi duplikasi, tetapi bisa membuat kode sulit dibaca jika ditumpuk terlalu banyak. Jika type hasilnya penting untuk domain UI, beri nama yang jelas seperti ProductCard atau ProductInput.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Reuse types dengan utility types

Latihan memakai Pick, Omit, Partial, dan Record dalam kasus object sederhana.

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.

4 cek otomatis4 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Pick mengambil property tertentu dari object type.
  • Omit membuat type tanpa property tertentu.
  • Partial membuat property menjadi optional.
  • Record cocok untuk object map sederhana.
  • Berikutnya, Uji Kompetensi akan mengecek practical type design secara utuh.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Gunakan type yang sudah ada.

Memuat progresReview module