0Pricing
Frontend Academy · Ders

Daraltma: typeof instanceof Ayırt Edilmiş Birleşimler

typeof, instanceof ve ayırt edici birleşim kalıplarıyla çalışma zamanında birleşim türlerini daraltmak için tür koruyucuları kullanın.

Daraltma: typeof instanceof Ayırt Edilmiş Birleşimler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Tür Daraltma Nedir

TypeScript, geniş bir türle başlar (örneğin, string | number). Daraltma, koşullu bir blok içinde türü daha özel bir türe dönüştürme işlemidir. TypeScript, daraltmayı otomatik olarak izler.

typeof ile Daraltma

typeof işleci, ilkel türleri daraltır. Bir if bloğunun içinde TypeScript, tam türü bilir.

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
}

instanceof ile Daraltma

instanceof, sınıf örneklerinin türünü daraltır. TypeScript, blok içinde belirli sınıfı bilir.

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

Doğruluk Denetimiyle Daraltma

TypeScript, doğruluk denetimlerinde null ve undefined değerlerini türden çıkarır.

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

Eşitlikle Daraltma

Katı eşitlik, türü değişmez değer türüne daraltır. Ayırt edici birleşim türleri ve dize numaralandırmaları için kullanışlıdır.

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

in İşleciyle Daraltma

in işleci, hangi özelliklerin var olduğunu denetleyerek nesne birleşim türlerini daraltır.

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

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

Ayırt Edici Birleşim Türleri — Etiket Tabanlı Daraltma

Ayırt edici bir birleşim türünde ortak bir değişmez değer türü özelliği bulunur (ayırt edici). TypeScript, bu özelliğe göre switch/if içinde birleşim türünü daraltır.

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

Tür Yüklemleri — Özel Tür Koruyucuları

Bir tür yüklemi işlevi, çağıran taraf için türü daraltır. Dönüş türü olarak param is Type kullanın.

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
}

Doğrulama İşlevleri

Bir doğrulama işlevi, koşul başarısız olursa hata oluşturur ve çağrıdan sonra türü daraltır.

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

Tüm Durumları Denetleme

Ayırt edici bir birleşim türü üzerinde switch kullanıldığında varsayılan dalda never türü bırakılırsa TypeScript tüm durumların ele alındığını doğrular. Yeni bir varyant eklendiğinde derleme hatası almak için never türüne atama yapan bir varsayılan dal ekleyin.

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

Array.isArray ile Daraltma

Array.isArray(), bir değeri dizi türüne daraltır.

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

Hızlı Kontrol

Bir birleşim türünün varyantlarını ayırt etmek için ortak bir değişmez özellik kullanan daraltma tekniği hangisidir?

Özet: TypeScript Daraltması

İlkel türler için typeof. Sınıflar için instanceof. Nesne biçimleri için in işleci. Doğruluk denetimi null/undefined değerlerini filtreler. Ortak bir değişmez özelliğe sahip ayırt edici birleşim türleri, tüm durumları ele alan switch ifadelerini mümkün kılar. Karmaşık çalışma zamanı denetimleri için özel tür yüklemleri (is). Varsayılan dallarda never kullanarak tüm durumları denetleme.

Sıkça Sorulan Sorular

“Daraltma: typeof instanceof Ayırt Edilmiş Birleşimler” dersi ücretsiz mi?

Evet — “Daraltma: typeof instanceof Ayırt Edilmiş Birleşimler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Daraltma: typeof instanceof Ayırt Edilmiş Birleşimler” dersinde ne öğreneceğim?

typeof, instanceof ve ayırt edici birleşim kalıplarıyla çalışma zamanında birleşim türlerini daraltmak için tür koruyucuları kullanın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Daraltma: typeof instanceof Ayırt Edilmiş Birleşimler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Generic'ler: T extends ve Kısıtlamalar
  2. Yardımcı Türler: Partial Required Pick Omit
  3. Eşlenmiş Türler ve Koşullu Türler
  4. Daraltma: typeof instanceof Ayırt Edilmiş Birleşimler
← Frontend Academy Sayfasına Dön