TypeScript Academy · Ders

Nesne Yapı Bozma Türleri

Yeniden adlandırma söz dizimini karıştırmadan yapı bozulan nesne özelliklerinin türünü belirleyin.

Nesne Yapı Bozma Türleri, 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.

Parçalama ve Tipler

Nesne parçalama, özellikleri bir nesneden alıp yerel değişkenlere aktarır. TypeScript ile parçalanan yapıya açıklama ekleyebilirsiniz — ancak sözdiziminde sıkça karşılaşılan bir tuzak vardır. Gelin bunu doğru yapalım.

Temel Nesne Parçalama

Basit parçalama, özellikleri adlarına göre çıkarır. TypeScript her değişkenin tipini kaynak nesneden çıkarır.

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

Desenin Tümüne Açıklama Ekleme

Parçalanan değişkenlere açıklama eklemek için tipi her değişkenin sonuna değil, nesnenin şeklini tanımlayacak şekilde tüm desenin ardına yazarsınız.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

İşlev Parametrelerini Parçalama

Çok yaygın bir kullanım biçimi, bir parametre nesnesini imzada doğrudan parçalayarak şeklini açıklamaktır. Gövdenin içinde name ve id, tipleri belirlenmiş yerel değişkenlerdir.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

İki Noktanın Neden Olduğu Parçalama Tuzakları

Parçalamada iki nokta, açıklama eklemek değil yeniden adlandırmak anlamına gelir. { name: string } yazmak, name değerini taşıyan ve adı string olan bir değişken oluşturur — neredeyse hiçbir zaman istediğiniz şey bu değildir.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Yeniden Adlandırma ve Tür Belirtmeyi Birlikte Kullanma

Hem yeniden adlandırmanız hem de tür belirtmeniz gerekiyorsa, iki nokta üst üste kullanarak yeniden adlandırın, ardından tür açıklamasını tüm örüntüye ekleyin. Şekil açıklaması yine özgün özellik adlarını kullanır.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Adlandırılmış Tür Kullanma

Önemsiz olmayan her şey için satır içi bir şekil yerine adlandırılmış bir arayüzü tercih edin. Okunması daha kolaydır ve yeniden kullanılabilir.

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

Yalnızca Bazı Özellikleri Yapıdan Ayırma

Her alanı çıkarmak zorunda değilsiniz. İhtiyacınız olanları seçin; oluşturduğunuz yerel değişkenler için nesnenin geri kalan türü yok sayılır.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Dönüş Değerlerini Yapıdan Ayırma

Bir işlev bir nesne döndürdüğünde, sonucu hemen yapıdan ayırabilirsiniz. Türler, dönüş türünden yerel değişkenlerinize aktarılır.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Geri Kalanı Toplama

Kalan örüntüsü, geriye kalan özellikleri yeni bir nesnede toplar. TypeScript bunu kaynak türden çıkarılan anahtarların eksiltilmiş hâli olarak türlendirir.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Satır İçi ve Adlandırılmış Kullanım Özeti

Satır içi şekiller tek seferlik, küçük örüntüler için uygundur. Şekil büyüdüğünde veya tekrarlandığında adlandırılmış bir türe geçin. Ayrıca şunu unutmayın: iki nokta üst üste yeniden adlandırır; tür açıklaması kapanış küme ayraçlarından sonra gelir.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Kısa Kontrol

Tür belirtilmiş nesne yapıdan ayırma konusundaki anlayışınızı sınayın.

Özet

Yapıdan ayırma işlemindeki tür açıklamaları tüm örüntüden sonra gelir ve nesne şeklini tanımlar. Örüntünün içindeki iki nokta üst üste, bir bağlamayı türlendirmez; bağlamayı yeniden adlandırır. İşlev parametrelerini ve dönüş değerlerini şekil açıklamalarıyla veya adlandırılmış türlerle yapıdan ayırın, yalnızca ihtiyacınız olan alanları çıkarın ve geri kalanı toplamak için bir kalan örüntüsü kullanın.

Sıkça Sorulan Sorular

“Nesne Yapı Bozma Türleri” dersi ücretsiz mi?

Evet — “Nesne Yapı Bozma Türleri” 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.

“Nesne Yapı Bozma Türleri” dersinde ne öğreneceğim?

Yeniden adlandırma söz dizimini karıştırmadan yapı bozulan nesne özelliklerinin 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 1. dersidir.

“Nesne Yapı Bozma Türleri” 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