TypeScript Academy · Pelajaran

Kondisional Tingkat Jenis

Buat percabangan berdasarkan jenis dengan ekspresi jenis kondisional.

Kondisional Tingkat Jenis adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Pernyataan Jika pada Tingkat Tipe

Bahasa tipe memperoleh percabangan melalui tipe kondisional. Sintaks T extends U ? X : Y berarti: jika T dapat ditetapkan ke U, hasilnya adalah X; jika tidak, hasilnya adalah Y.

Ini adalah padanan pada tingkat tipe dari ekspresi if / else.

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>; // "yes"
type B = IsString<number>; // "no"

extends Berarti Dapat Ditugaskan

Pengujian ini bukanlah pemeriksaan kesamaan. T extends U bernilai benar jika nilai bertipe T dapat digunakan di tempat yang mengharapkan U. Tipe literal dapat ditetapkan ke tipe dasarnya.

type T1 = "hello" extends string ? true : false; // true
type T2 = string extends "hello" ? true : false; // false
type T3 = 42 extends number ? true : false;       // true

Memilih Tipe Hasil

Tipe kondisional memungkinkan satu generik mengembalikan bentuk yang berbeda bergantung pada masukan. Di sini, Wrap membungkus larik secara berbeda dari nilai skalar.

type Wrap<T> = T extends unknown[]
  ? { list: T }
  : { value: T };

type A = Wrap<number>;   // { value: number }
type B = Wrap<string[]>; // { list: string[] }

Menyaring menjadi never

Trik yang umum adalah mengembalikan never pada salah satu cabang. never berarti "tidak ada nilai", dan berguna untuk menghapus anggota dari gabungan nantinya.

type OnlyStrings<T> = T extends string ? T : never;

type A = OnlyStrings<string>; // string
type B = OnlyStrings<number>; // never

Menyimpulkan dengan infer

Kekuatan sebenarnya terlihat pada kata kunci infer. Di dalam kondisional, infer memperkenalkan variabel tipe baru yang menangkap sebagian dari tipe yang cocok.

Di sini kita menangkap tipe elemen dari sebuah larik.

type ElementType<T> = T extends (infer U)[] ? U : never;

type A = ElementType<number[]>; // number
type B = ElementType<string[]>; // string

Menyimpulkan Hasil Fungsi

Anda dapat menempatkan infer di mana saja dalam pola. Untuk mengekstrak tipe hasil fungsi, simpulkan bagian setelah tanda panah. Beginilah cara kerja ReturnType bawaan.

type MyReturn<T> = T extends (...args: any[]) => infer R ? R : never;

type A = MyReturn<() => number>;      // number
type B = MyReturn<(x: string) => boolean>; // boolean

Menyimpulkan Beberapa Bagian

Satu kondisional dapat memperkenalkan beberapa variabel infer sekaligus. Di sini kita mengambil bagian pertama dan sisanya dari sebuah tupel.

type FirstRest<T> = T extends [infer H, ...infer R]
  ? { head: H; rest: R }
  : never;

type A = FirstRest<[1, 2, 3]>;
// { head: 1; rest: [2, 3] }

Kondisional Bersarang

Kondisional dapat dibuat bersarang seperti rangkaian else if. Cabang else dari satu kondisional dapat menjadi kondisional lain, sehingga membentuk tangga keputusan.

type Describe<T> =
  T extends string ? "text" :
  T extends number ? "num" :
  T extends boolean ? "flag" :
  "other";

type A = Describe<number>; // "num"
type B = Describe<null>;   // "other"

Kondisi sebagai Pengaman

Gunakan kondisional untuk memverifikasi suatu bentuk sebelum mengekstrak darinya. Jika masukan tidak cocok, gunakan never sebagai nilai cadangan agar kesalahan penggunaan terlihat.

type GetName<T> = T extends { name: infer N } ? N : never;

type A = GetName<{ name: string }>; // string
type B = GetName<{ age: number }>;  // never

Menggabungkan Kondisi

Anda dapat mensyaratkan beberapa kondisi dengan membuatnya bersarang. Di sini, sebuah tipe harus berupa objek dan memiliki id agar dapat lolos.

type RequireId<T> =
  T extends object
    ? T extends { id: unknown } ? T : never
    : never;

type A = RequireId<{ id: 1; x: 2 }>; // { id: 1; x: 2 }
type B = RequireId<{ x: 2 }>;        // never

Kondisional Ada di Mana-Mana

Sebagian besar tipe utilitas bawaan pada dasarnya adalah kondisional: NonNullable, Extract, Exclude, Parameters, dan ReturnType. Memahami extends ? : membuka pemahaman terhadap semuanya.

type MyNonNullable<T> = T extends null | undefined ? never : T;

type A = MyNonNullable<string | null>; // string

Pemeriksaan Singkat

Uji pemahaman Anda tentang tipe kondisional dan infer.

Rangkuman

Tipe kondisional memberikan bahasa tipe percabangan if/else dan pencocokan pola.

T extends U ? X : Y membuat percabangan berdasarkan kemampuan penetapan.
infer menangkap bagian yang cocok ke dalam variabel baru.
Kondisional dapat dibuat bersarang untuk membentuk tangga keputusan.
Mengembalikan never menyaring anggota.

Berikutnya: memasukkan kondisional kembali ke dalam dirinya sendiri untuk membentuk rekursi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kondisional Tingkat Jenis” gratis?

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

Apa yang akan aku pelajari di “Kondisional Tingkat Jenis”?

Buat percabangan berdasarkan jenis dengan ekspresi jenis kondisional. Kamu berlatih TypeScript 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 TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript 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 2 dari 4.

Berapa lama pelajaran “Kondisional Tingkat Jenis” 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 TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript 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

← Kembali ke TypeScript Academy