TypeScript Academy · Ders

?. ile İsteğe Bağlı Zincirleme

null olabilecek derin iç içe özelliklere güvenle erişin.

?. ile İsteğe Bağlı Zincirleme, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 1. 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.

İsteğe Bağlı Zincirleme İşleci

İsteğe bağlı zincirleme (?.), null veya undefined olabilecek bir değerin özelliğine güvenle erişmenizi sağlar. Değer boşsa, tüm ifade hata fırlatmak yerine kısa devre yaparak undefined sonucuna ulaşır.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

Boş Değerde Kısa Devre

?. işlecinden önceki işlenen null veya undefined olduğunda değerlendirme hemen durur ve undefined döndürülür. Zincirin geri kalanı hiçbir zaman yürütülmez.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

Birden Çok Düzeyde Zincirleme

Derin bir erişimin belirsiz olan her adımına ?. yerleştirebilirsiniz. Herhangi bir boş bağlantı tüm zinciri kısa devreye uğratır ve sizi “tanımsız değerin özelliği okunamıyor” hatalarından korur.

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

Sonuç Türü undefined İçerir

Zincir undefined üretebildiği için TypeScript sonuç türüne undefined ekler. Özelliğin türü string ise zincirlenmiş sonuç string | undefined olur.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

undefined Sonucunu Ele Alma

Sonuç undefined olabileceğinden genellikle sonucu denetler veya bir yedek değer sağlarsınız. Tür sistemi, eksik durumu ele almanızı hatırlatır.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

&& Zincirleriyle Karşılaştırma

?. işlecinden önce geliştiriciler uzun && zincirleri yazardı: a && a.b && a.b.c. İsteğe bağlı zincirleme aynı amacı çok daha kısa biçimde ifade eder ve yukarıdan aşağıya okunur.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

?. Neden && İşlecinden Daha İyi

&& yaklaşımı herhangi bir yanlışlanabilir değeri (0, '', false) durma noktası olarak ele alır; bu da hata oluşturabilir. İsteğe bağlı zincirleme yalnızca null veya undefined durumunda durur; genellikle istediğiniz davranış budur.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

Nesne Dizilerinde İsteğe Bağlı Zincirleme

İsteğe bağlı zincirleme her türlü özellik erişiminde çalışır. Öğe erişimiyle birleştirildiğinde iç içe nesne dizilerine güvenle ulaşmanızı sağlar.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

Kısa Devre Tüm İfadeyi Durdurur

Bir zincir kısa devre yaptığında, ondan sonra yazılan özellik erişimleri (içlerinde ?. olmasa bile) atlanır. Tüm ifade bir anda undefined olarak değerlendirilir.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

İşlev Dönüşleriyle İsteğe Bağlı Zincirleme

Bir işlev çağrısının sonucu üzerinden zincirleme yapabilirsiniz. İşlev boş bir değer döndürürse sonraki erişim güvenle kısa devre yapar.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

Uygulamalı Bir Yapılandırma Örneği

İsteğe bağlı zincirleme, iç içe alanların eksik olabileceği partial yapılandırmayı veya uygulama programlama arayüzü yanıtlarını okurken çok işe yarar. Erişimi okunabilir ve çökmeye karşı güvenli tutar.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

Kısa Sınama

İsteğe bağlı zincirlemeyi anlayışınızı sınayın.

Özet: İsteğe Bağlı Zincirleme

?. hakkında şunları öğrendiniz:

Muhtemelen null/undefined olan değerlerin özelliklerine güvenle erişir.
Boş bir bağlantıyla karşılaşıldığında tüm ifadeyi undefined sonucuna kısa devreye uğratır.
Sonuç türüne undefined ekler.
Tüm yanlışlanabilir değerlerde değil, yalnızca boş değerlerde durarak && zincirlerini geliştirir.

Sırada, boş değer birleştirme işleci var.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

Sıkça Sorulan Sorular

“?. ile İsteğe Bağlı Zincirleme” dersi ücretsiz mi?

Evet — “?. ile İsteğe Bağlı Zincirleme” 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.

“?. ile İsteğe Bağlı Zincirleme” dersinde ne öğreneceğim?

null olabilecek derin iç içe özelliklere güvenle erişin. 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 1. dersidir.

“?. ile İsteğe Bağlı Zincirleme” 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