TypeScript Academy · Ders

?. ve ?? Birlikte Kullanımı

İsteğe bağlı zincirlemeyi mantıklı varsayılan değerlerle eşleştirin.

?. ve ?? Birlikte Kullanımı, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 3. 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, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Mükemmel İkili

İsteğe bağlı zincirleme ve boş değer birleştirme, birlikte çalışacak şekilde tasarlanmıştır. obj?.value ?? fallback kalıbı, iç içe bir değeri güvenle okur ve değer eksikse varsayılan bir değer sağlar. Bu, modern TypeScript'teki en kullanışlı deyimlerden biridir.

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

Kalıp Nasıl Çalışır

Önce ?. zinciri değerlendirerek değeri veya undefined üretir. Ardından ?? bu sonucu denetler: sonuç null veya undefined ise yedek değer kullanılır. İki işleç, tek ve temiz bir ifade.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

Sonucun Türü

Zincir T | undefined üretir; ??, undefined değerini kaldırır ve yedek değerin türünü birleşime ekler. Yedek değer uyumlu olduğunda son tür yalnızca T olur; ele alınması gereken bir undefined kalmaz.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

Geçerli Yanlış-Kabul Edilen Değerleri Koruma

?? yalnızca null veya undefined değerlerde devreye girdiği için, zincir üzerinden alınan geçerli bir 0 korunur. Yedek değer yalnızca özellik gerçekten eksik olduğunda uygulanır.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

Derin Yapılandırmaya Erişim

Derin iç içe yapılandırmalarda birden çok ?. adımını zincirleyin ve tek bir ?? ile bitirin. Eksik olan herhangi bir bağlantı, sorunsuz biçimde varsayılan değere geçer.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

API Yanıtlarında Varsayılan Değerler

API yanıtlarında isteğe bağlı alanlar genellikle bulunmaz. Birleşik kalıp, bu alanları güvenli biçimde okur ve makul varsayılan değerlerle değiştirir; böylece sonraki kod basit kalır ve çökmeler önlenir.

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

Yöntem Sonuçlarıyla Birleştirme

İşlev veya yöntem çağrılarının sonuçları üzerinde zincirleme yapabilir ve bu sonuçlara varsayılan değerler sağlayabilirsiniz. Çağrı null veya undefined döndürürse yedek değer devreye girer.

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

Uzun Denetimlerden Kaçınma

Bu işleçlerden önce birden çok satırlık null denetimleri yazmanız gerekirdi. Birleşik deyim, güvenliği kaybetmeden koca bir kod bloğunun yerini tek bir ifadeyle doldurur ve okunabilirliği artırır.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

Başka Bir Aramaya Geçiş

?? sonrasındaki yedek değer, kendisi de başka bir zincirlenmiş arama olabilir. Böylece son bir sabit varsayılan değere geçmeden önce ikincil bir kaynağı deneyebilirsiniz.

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

Öğe Erişimiyle Birleştirme

Kalıp, dizi öğelerine erişimde de çalışır: ?.[i] üzerinden bir öğeyi okuyabilir ve ?? ile bu öğeye varsayılan değer sağlayabilirsiniz.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

Gerçek Dünyadan Bir Ayar Okuyucu

Hepsini bir araya getirelim: isteğe bağlı katmanlar boyunca güvenle ilerleyen ve kullanılabilir bir değeri garanti eden bir ayar okuyucu. Bu, gerçek uygulamalarda sıkça yazacağınız bir TypeScript kodudur.

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

Kısa Kontrol

?. ve ?? işleçlerini birlikte kullanma konusundaki anlayışınızı sınayın.

Özet: ?. ve ?? Birlikte Kullanımı

obj?.value ?? fallback deyimini öğrendiniz:

?. güvenle ilerler ve değeri veya undefined değerini üretir.
?? yalnızca sonuç null veya undefined olduğunda varsayılan değer sağlar.
Son türden undefined çıkarılır ve tür çoğu zaman temiz bir T hâline gelir.
0 gibi geçerli, yanlış-kabul edilen değerler korunur.

Sırada isteğe bağlı çağrılar ve isteğe bağlı öğe erişimi bulunuyor.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

Sıkça Sorulan Sorular

“?. ve ?? Birlikte Kullanımı” dersi ücretsiz mi?

Evet — “?. ve ?? Birlikte Kullanımı” 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 TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“?. ve ?? Birlikte Kullanımı” dersinde ne öğreneceğim?

İsteğe bağlı zincirlemeyi mantıklı varsayılan değerlerle eşleştirin. TypeScript 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.

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

Önceden deneyim gerekmez. CoddyKit'te TypeScript 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 3. dersidir.

“?. ve ?? Birlikte Kullanımı” 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 TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript 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

← TypeScript Academy Sayfasına Dön