TypeScript Academy · Ders

İsteğe Bağlı Çağrılar ve Öge Erişimi

Güvenli işlev çağrıları ve dizin erişimi için ?.() ve ?.[] kullanın.

İsteğe Bağlı Çağrılar ve Öge Erişimi, CoddyKit'te ücretsiz bir TypeScript 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, 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.

Özellik Erişiminin Ötesi

İsteğe bağlı zincirleme yalnızca obj?.prop ile sınırlı değildir. İki biçimi daha vardır: isteğe bağlı çağrılar için ?.() ve isteğe bağlı öğe erişimi için ?.[index]. Her ikisi de özellik erişiminde olduğu gibi değer null veya undefined olduğunda kısa devre yapar.

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

İsteğe Bağlı Metot Çağrıları

Bir metodu yalnızca mevcutsa çağırmak için obj.method?.() kullanın. method değeri null veya undefined ise çağrı atlanır ve ifade undefined sonucunu verir.

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

?. İşlecini Nereye Yazmalı

?. işlecini çağrı parantezlerinin hemen önüne yazın. obj.method?.(), obj nesnesini değil, method değerini kontrol eder. obj nesnesini de korumak için obj?.method?.() yazın.

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

İsteğe Bağlı Geri Çağrıları Çağırma

Çok yaygın bir kullanım alanı, isteğe bağlı bir geri çağırma parametresini çağırmaktır. Bir if kontrolü yapmak yerine, yalnızca sağlanmışsa çağırmak için callback?.() yazın.

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

İsteğe Bağlı Öğe Erişimi

Null veya undefined olabilen diziler ya da dizin imzaları için arr?.[index] kullanın. arr null veya undefined ise erişim kısa devre yapar; aksi hâlde öğe normal şekilde okunur.

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

Dinamik Anahtarlarla Öğe Erişimi

İsteğe bağlı öğe erişimi, null veya undefined olabilen bir nesnedeki dinamik ya da hesaplanan anahtarlar için köşeli parantez gösterimiyle de çalışır.

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

Öğe Erişimiyle Çağrıları Birleştirme

Bu biçimleri özgürce birleştirebilirsiniz. İsteğe bağlı bir diziye erişip ardından öğe üzerindeki bir metodu isteğe bağlı olarak çağırabilirsiniz — her ?. kendi adımını korur.

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

İşlev Sonuçlarıyla İsteğe Bağlı Zincirleme

Bir işlevin döndürdüğü herhangi bir değer üzerinden zincir oluşturabilirsiniz. İşlev null veya undefined döndürürse sonraki çağrılar ya da erişimler güvenli bir şekilde kısa devre yapar.

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

Sonuç Türü undefined İçerir

Özellik zincirlerinde olduğu gibi, isteğe bağlı çağrılar ve öğe erişimi sonuç türüne undefined ekler. Varsayılan bir değer sağlamak ve undefined değerini kaldırmak için bunları ?? ile eşleştirin.

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

Olay İşleyicilerini Korumak

Kullanıcı arayüzü ve olay kodunda, isteğe bağlı çağrılar ayarlanmamış olabilecek işleyicileri zarif bir şekilde çağırmanızı sağlar. Uzun bir varlık kontrolüne gerek kalmaz ve işleyici yoksa uygulama çökmez.

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

Bir Eklenti Dağıtıcısı Örneği

Hepsini bir araya getirelim: Muhtemelen seyrek bir kayıt defterindeki adlandırılmış eklenti kancasını isteğe bağlı olarak çağıran ve hiçbir işleyici bulunmadığında sonucu varsayılan bir değere ayarlayan bir dağıtıcı.

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

Hızlı Kontrol

İsteğe bağlı çağrıları ve öğe erişimini anlayıp anlamadığınızı test edin.

Özet: İsteğe Bağlı Çağrılar ve Erişim

İsteğe bağlı zincirlemenin diğer biçimlerini öğrendiniz:

obj.method?.(), bir metodu yalnızca mevcutsa çağırır.
arr?.[index], null veya undefined olabilen bir kapsayıcıdan öğeyi güvenli bir şekilde okur.
Tüm biçimler, null veya undefined olan bir işlenende undefined sonucuna kısa devre yapar.
Sonucu varsayılan bir değere dönüştürmek için ?? ile birleştirilebilirler.

Sıradaki kurs: readonly ve değişmezlik temelleri.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

Sıkça Sorulan Sorular

“İsteğe Bağlı Çağrılar ve Öge Erişimi” dersi ücretsiz mi?

Evet — “İsteğe Bağlı Çağrılar ve Öge Erişimi” 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.

“İsteğe Bağlı Çağrılar ve Öge Erişimi” dersinde ne öğreneceğim?

Güvenli işlev çağrıları ve dizin erişimi için ?.() ve ?.[] kullanın. 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 4. dersidir.

“İsteğe Bağlı Çağrılar ve Öge Erişimi” 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