0Pricing
Frontend Academy · Pelajaran

Penyempitan: typeof, instanceof, union terdiskriminasi

Gunakan penjaga tipe untuk mempersempit tipe union saat runtime dengan typeof, instanceof, dan pola union terdiskriminasi.

Penyempitan: typeof, instanceof, union terdiskriminasi adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Apa Itu Penyempitan Tipe?

TypeScript memulai dengan tipe yang luas (misalnya, string | number). Penyempitan adalah proses mempersempit tipe menjadi tipe yang lebih spesifik di dalam blok kondisional. TypeScript melacak penyempitan secara otomatis.

Penyempitan dengan typeof

Operator typeof mempersempit tipe primitif. Di dalam blok if, TypeScript mengetahui tipe yang tepat.

function format(value: string | number | boolean): string {
  if (typeof value === 'string') {
    return value.toUpperCase(); // string here
  }
  if (typeof value === 'number') {
    return value.toFixed(2);   // number here
  }
  return String(value);        // boolean here
}

Penyempitan dengan instanceof

instanceof mempersempit instans kelas. TypeScript mengetahui kelas spesifik di dalam blok tersebut.

function processError(err: unknown) {
  if (err instanceof Error) {
    console.error(err.message); // Error methods available
  } else if (err instanceof Response) {
    console.error('HTTP error:', err.status);
  } else {
    console.error('Unknown:', err);
  }
}

Penyempitan berdasarkan Kebenaran

TypeScript mengeluarkan null dan undefined dari tipe saat melakukan pemeriksaan bernilai benar.

function printLength(value: string | null | undefined) {
  if (value) {
    console.log(value.length); // string here (null/undefined filtered)
  }
}

Penyempitan berdasarkan Kesetaraan

Kesetaraan ketat mempersempit tipe menjadi tipe literal. Ini berguna untuk gabungan terbedakan dan enumerasi string.

function handle(action: 'submit' | 'cancel' | 'reset') {
  if (action === 'submit') {
    // action is exactly 'submit'
    doSubmit();
  }
}

Penyempitan dengan Operator in

Operator in mempersempit tipe gabungan objek dengan memeriksa properti mana yang ada.

interface Cat { meow(): void; }
interface Dog { bark(): void; }

function speak(animal: Cat | Dog) {
  if ('meow' in animal) {
    animal.meow(); // Cat
  } else {
    animal.bark(); // Dog
  }
}

Gabungan Terbedakan — Penyempitan Berbasis Tag

Gabungan terbedakan memiliki properti tipe literal yang sama (yaitu pembeda). TypeScript mempersempit gabungan tersebut dalam switch/if berdasarkan properti itu.

type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState   = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;

function render(state: State) {
  switch (state.status) {
    case 'loading': return '<Spinner />';
    case 'success': return renderUsers(state.data);  // state.data available
    case 'error':   return renderError(state.message);
  }
}

Predikat Tipe — Penjaga Tipe Kustom

Fungsi predikat tipe mempersempit tipe bagi pemanggilnya. Gunakan param is Type sebagai tipe kembalian.

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'name' in value &&
    typeof (value as User).name === 'string'
  );
}

const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
  console.log(data.name); // typed as User
}

Fungsi Penegasan

Fungsi penegasan melempar galat jika kondisi tidak terpenuhi, sehingga tipe menjadi lebih sempit setelah pemanggilan tersebut.

function assertIsString(val: unknown): asserts val is string {
  if (typeof val !== 'string') throw new Error('Expected string');
}

const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string here

Pemeriksaan Kelengkapan

Ketika switch pada gabungan terbedakan menghasilkan tipe never di cabang default, TypeScript memastikan semua kasus telah ditangani. Tambahkan default yang menetapkan nilai ke never agar memperoleh galat kompilasi jika varian baru ditambahkan.

function render(state: State): string {
  switch (state.status) {
    case 'loading': return '...';
    case 'success': return state.data.length.toString();
    case 'error':   return state.message;
    default:
      const _exhaustive: never = state;
      throw new Error('Unhandled state: ' + _exhaustive);
  }
}

Penyempitan dengan Array.isArray

Array.isArray() mempersempit nilai menjadi tipe larik.

function processInput(input: string | string[]) {
  if (Array.isArray(input)) {
    return input.join(', '); // string[]
  }
  return input.toUpperCase(); // string
}

Pemeriksaan Singkat

Teknik penyempitan mana yang menggunakan properti literal yang sama untuk membedakan varian dari suatu tipe gabungan?

Ringkasan: Penyempitan TypeScript

typeof untuk tipe primitif. instanceof untuk kelas. Operator in untuk bentuk objek. Pemeriksaan kebenaran memfilter null/undefined. Gabungan terbedakan dengan properti literal yang sama memungkinkan pernyataan switch yang lengkap. Predikat tipe kustom (is) untuk pemeriksaan runtime yang kompleks. Pemeriksaan kelengkapan dengan never pada nilai default.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyempitan: typeof, instanceof, union terdiskriminasi” gratis?

Ya — teks lengkap “Penyempitan: typeof, instanceof, union terdiskriminasi” 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 “Penyempitan: typeof, instanceof, union terdiskriminasi”?

Gunakan penjaga tipe untuk mempersempit tipe union saat runtime dengan typeof, instanceof, dan pola union terdiskriminasi. 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 4 dari 4.

Berapa lama pelajaran “Penyempitan: typeof, instanceof, union terdiskriminasi” 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