0Pricing
Frontend Academy · Pelajaran

Tipe Mapped dan Tipe Conditional

Buat tipe mapped untuk mentransformasikan semua properti suatu tipe, lalu gunakan tipe conditional dengan infer untuk logika tingkat tipe yang lebih lanjut.

Tipe Mapped dan Tipe Conditional adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Tipe Terpetakan — Mengubah Setiap Properti

Tipe terpetakan mengiterasi kunci suatu tipe dan mengubahnya. Tipe ini menjadi dasar tipe utilitas Partial, Readonly, dan Record.

// Partial implemented as a mapped type:
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Readonly:
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

Memetakan Ulang Kunci dengan as

Gunakan as dalam klausa pemetaan untuk memetakan ulang nama kunci. Gabungkan dengan tipe literal templat untuk menghasilkan transformasi yang kuat.

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

Memfilter Properti dengan never

Kembalikan never dari pemetaan ulang kunci untuk menghapus properti tersebut dari tipe yang dihasilkan.

// Keep only function-valued properties:
type FunctionProperties<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

Tipe Kondisional — if/else untuk Tipe

Tipe kondisional menggunakan pola T extends U ? TrueType : FalseType. Tipe ini dievaluasi pada tingkat tipe, bukan saat runtime.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>;       // number

Tipe Kondisional Distributif

Ketika T merupakan union, tipe kondisional didistribusikan ke setiap anggotanya. string | number extends string ? ... memeriksa masing-masing secara terpisah: (string extends string ? ...) | (number extends string ? ...).

type ToArray<T> = T extends any ? T[] : never;

type StringOrNumberArray = ToArray<string | number>;
// string[] | number[]  (not (string | number)[])

Menggunakan infer untuk Mengekstrak Tipe

infer R memperkenalkan variabel tipe yang diisi oleh TypeScript. Fitur ini memungkinkan Anda menangkap bagian-bagian dari struktur tipe.

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>;             // number

Tipe Literal Templat

Tipe literal templat menggunakan sintaks tanda kutip terbalik yang sama seperti literal templat, tetapi pada tingkat tipe, sehingga membuat tipe union dari berbagai kombinasi literal string.

type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

Menggabungkan Tipe Terpetakan dan Kondisional

Pola TypeScript yang paling kuat menggabungkan keduanya. Tipe bawaan required, partial, readonly, dan record semuanya merupakan tipe terpetakan.

// Make all functions in an object async:
type Asyncify<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
    ? (...args: A) => Promise<R>
    : T[K];
};

DeepPartial — Tipe Utilitas Rekursif

Partial bawaan hanya bekerja satu tingkat ke dalam. DeepPartial melakukan rekursi ke dalam objek bertingkat.

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

Penggunaan di Dunia Nyata: Tipe Respons API

Tipe terpetakan dan tipe kondisional memungkinkan penurunan tipe API yang canggih — misalnya, mengekstrak hanya properti objek yang dapat diserialisasi sebagai JSON.

Hindari Rekayasa Berlebihan

Permainan tipe yang kompleks dapat membuat kode sulit dipahami. Selalu tanyakan: apakah alias tipe atau antarmuka yang lebih sederhana akan lebih jelas? Tipe seharusnya mendokumentasikan maksud, bukan memamerkan penguasaan TypeScript.

Pemeriksaan Singkat

Apa hasil evaluasi T extends U ? A : B ketika T merupakan tipe gabungan?

Ringkasan: Tipe Terpetakan dan Kondisional

Tipe terpetakan melakukan iterasi pada kunci dengan [K in keyof T]. Gunakan as untuk memetakan ulang kunci. Kembalikan never untuk memfilter. Tipe kondisional: T extends U ? A : B. infer mengekstrak variabel tipe. Tipe literal templat membangun gabungan string. Gabungkan keduanya untuk transformasi tipe yang canggih seperti DeepPartial dan Asyncify.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tipe Mapped dan Tipe Conditional” gratis?

Ya — teks lengkap “Tipe Mapped dan Tipe Conditional” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Tipe Mapped dan Tipe Conditional”?

Buat tipe mapped untuk mentransformasikan semua properti suatu tipe, lalu gunakan tipe conditional dengan infer untuk logika tingkat tipe yang lebih lanjut. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Tipe Mapped dan Tipe Conditional” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Generics: T extends dan batasan
  2. Tipe Utilitas: Partial, Required, Pick, Omit
  3. Tipe Mapped dan Tipe Conditional
  4. Penyempitan: typeof, instanceof, union terdiskriminasi
← Kembali ke Frontend Academy