Serikat Pekerja dan Penyempitan

Di dunia nyata, variabel dan respons API tidak selalu memiliki satu tipe tetap. TypeScript menawarkan Union Types untuk menangani variabilitas, dan Type Narrowing untuk mengoperasikannya dengan aman saat runtime.

Jenis Serikat

Tipe gabungan memungkinkan variabel menerima nilai dari tipe berbeda. Hal ini dinyatakan dengan menggunakan simbol batang vertikal (|):

let result: number | string;
result = 42; // Valid
result = 'Error 404'; // Valid

Namun, saat bekerja dengan tipe gabungan, kita tidak bisa langsung memanggil metode yang hanya dimiliki salah satu tipe tersebut (misalnya, kita tidak bisa memanggil .toUpperCase() jika variabelnya juga bisa berupa number). Pertama-tama kita harus "mempersempit" jenisnya.

Ketik Penyempitan

Penyempitan Tipe adalah proses saat TypeScript menganalisis struktur aliran kontrol (seperti if atau switch) untuk menyimpulkan tipe yang lebih spesifik untuk suatu variabel pada waktu proses.

Ada beberapa cara untuk melakukan penyempitan:

1. Operator typeof

Ideal untuk membedakan tipe primitif:

function printLength(value: string | number) {
  if (typeof value === 'string') {
    // TypeScript knows 'value' is a string here
    console.log(value.length);
  } else {
    // TypeScript knows 'value' is a number here
    console.log(value.toFixed(2));
  }
}

2. Operator in

Digunakan untuk memeriksa apakah ada properti tertentu pada suatu objek:

interface Fish {
  swim: () => void;
}
interface Bird {
  fly: () => void;
}

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim(); // Narrowing to Fish
  } else {
    animal.fly(); // Narrowing to Bird
  }
}

Serikat Pekerja yang Didiskriminasi

Pola Serikat Terdiskriminasi terdiri dari pembuatan objek yang berbagi properti umum dengan nilai literal yang unik (disebut diskriminator). TypeScript mengenali diskriminator ini dan secara otomatis mempersempit tipe dalam blok bersyarat.

interface SuccessResponse {
  status: 'success'; // Literal discriminator
  data: string;
}

interface ErrorResponse {
  status: 'error'; // Literal discriminator
  errorMessage: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('Data received:', response.data);
  } else {
    console.error('An error occurred:', response.errorMessage);
  }
}

Cobalah sendiri

Latihan 1: Jenis Serikat

Latihan 2: Penyempitan Tipe Dasar

Latihan 3: Mempersempit dengan 'dalam'

Latihan 4: Bentuk Persatuan yang Didiskriminasi