Birleşmeler ve Daralma

Gerçek dünyada değişkenler ve API yanıtları her zaman tek bir sabit türe sahip değildir. TypeScript, değişkenliği yönetmek için Birleşim Türleri ve çalışma zamanında bunlar üzerinde güvenli bir şekilde çalışmak için Tür Daraltma sunar.

Rakor Çeşitleri

Birleşim türü, bir değişkenin farklı türdeki değerleri kabul etmesine olanak tanır. Dikey çubuk (|) sembolü kullanılarak ifade edilir:

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

Ancak bir birleşim türüyle çalışırken yalnızca türlerden birine ait olan yöntemleri doğrudan çağıramayız (örneğin, değişken aynı zamanda bir number olabiliyorsa .toUpperCase() öğesini çağıramayız). İlk önce türü "daraltmalıyız".

Tip Daraltma

Tür Daraltma, çalışma zamanında bir değişken için daha spesifik bir tür belirlemek amacıyla TypeScript'in kontrol akışı yapılarını (if veya switch gibi) analiz ettiği süreçtir.

Daraltma gerçekleştirmenin birkaç yolu vardır:

1. typeof Operatörü

İlkel türleri ayırt etmek için idealdir:

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. in Operatörü

Bir nesnede belirli bir özelliğin mevcut olup olmadığını kontrol etmek için kullanılır:

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
  }
}

Ayrımcılığa Uğrayan Sendikalar

Ayrımlı Birleşimler modeli, benzersiz bir gerçek değere (discriminator adı verilir) sahip ortak bir özelliği paylaşan nesnelerin oluşturulmasından oluşur. TypeScript bu ayırıcıyı tanır ve türü koşullu bloklar içinde otomatik olarak daraltır.

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);
  }
}

Kendin dene

Alıştırma 1: Birleşim Türleri

Alıştırma 2: Temel Tip Daraltma

Alıştırma 3: 'içeri' ile daraltma

Alıştırma 4: Ayrımcı Birleşim Şekli