TypeScript Academy · Ders

İç İçe Yapı Bozma Kalıpları

Derin iç içe yapı bozma ifadelerinin türünü belirleyin.

İç İçe Yapı Bozma Kalıpları, 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.

İç İçe Verilere Ulaşma

İç içe yapıdan ayırma, tek bir ifadede nesnelerin içindeki nesnelerden değerler çıkarır. Kısadır; ancak türlerle anlaşılması gereken biçimlerde etkileşir ve gereğinden fazla kullanılırsa okunabilirliği azaltabilir.

İç İçe Bir Özelliği Yapıdan Ayırma

Sol taraftaki nesnenin şeklini yansıtın. data.user.name değerine ulaşmak için user altına bir örüntü yerleştirin.

const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada

Dış Ad Bağlanmaz

İnce bir tuzak: { user: { name } } içinde user yalnızca bir yoldur, bağlama değildir. name elde edilir; ancak sonrasında user adlı bir değişken bulunmaz.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

İç İçe Yapıdan Ayırmaya Tür Verme

Örüntüden sonra tam iç içe şekli kullanarak tür açıklaması ekleyin. Her düzey nesne yapısını yansıtır.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

Adlandırılmış Türler Daha İyi Okunur

Satır içi iç içe şekiller hızla kullanışsız hâle gelir. Adlandırılmış bir arayüz, iç içe çıkarma işlemine yine izin verirken tür açıklamasını temiz tutar.

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

Her İki Düzeyi de Çıkarma

Dış nesneye de ihtiyacınız varsa onu ayrı olarak çıkarın, ardından üyelerini başka bir adımda yapıdan ayırın. Bu yaklaşım çoğu zaman derin iç içe kullanımdan daha anlaşılırdır.

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

İç İçe Kullanımı Varsayılan Değerlerle Birleştirme

Varsayılan değerler herhangi bir düzeyde bulunabilir. Eksik olabilecek iç içe bir alan için, onu bağladığınız yerde yedek değer sağlayın.

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

Eksik Alt Nesneleri Varsayılan Yapma

Bütün bir iç içe nesne eksik olabiliyorsa, alanlarını yapıdan ayırmadan önce ona {} varsayılan değerini verin; aksi hâlde undefined değerinin bir özelliğine erişmek hata verir.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

Nesne İçinde İç İçe Dizi

Nesne ve dizi örüntülerini birlikte kullanabilirsiniz. Burada iç içe bir dizideki ilk etiketi tek satırda alıyoruz.

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

Okunabilirlik Dengeleri

Derin iç içe örüntüler satır sayısını azaltır; ancak amacı belirsizleştirebilir. Varsayılan değerlerle birlikte üç düzey derinlikteki bir yapı taranarak anlaşılmayı zorlaştırır. Okuyucunun durup düşünmesi gerekiyorsa yapıyı adımlara bölün.

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

Dengeli Bir Örnek

Birkaç alanla tek düzey iç içe kullanım genellikle en uygun noktadır; kısa olurken anlaşılmaz hâle gelmez.

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

Kısa Kontrol

İç içe yapıdan ayırma konusundaki anlayışınızı sınayın.

Özet

İç içe yapıdan ayırma, iç değerlere ulaşmak için nesne şeklini yansıtır; dış anahtarlar bağlama değil yol olduğundan yalnızca en içteki adlar değişken hâline gelir. Tam iç içe şekli veya adlandırılmış bir türü kullanarak tür açıklaması ekleyin, eksik alt nesneleri alanlarını yapıdan ayırmadan önce {} olarak varsayılan yapın ve gerektiğinde dizi örüntülerini de kullanın. İç içe kullanımı sığ tutun; okunabilirlik için derin örüntüleri adımlara bölün.

Sıkça Sorulan Sorular

“İç İçe Yapı Bozma Kalıpları” dersi ücretsiz mi?

Evet — “İç İçe Yapı Bozma Kalıpları” 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.

“İç İçe Yapı Bozma Kalıpları” dersinde ne öğreneceğim?

Derin iç içe yapı bozma ifadelerinin türünü belirleyin. 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.

“İç İçe Yapı Bozma Kalıpları” 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