TypeScript Academy · Ders

typeof ve keyof'yu Birleştirme

Tür işleçlerini zincirleyerek kesin türler türetin.

typeof ve keyof'yu Birleştirme, 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.

Güçlü Birleşim

Tek başına typeof bir değerden tür türetir, keyof ise bir türün anahtarlarını listeler. Birlikte kullanıldıklarında — keyof typeof value — bir değerin gerçek anahtarlarından oluşan bir birleşim üretir ve tamamen tür güvenli erişim sağlarlar.

Uygulamada keyof typeof

Bir sabit nesneyle başlayın, türünü typeof ile elde edin, ardından anahtarlarını keyof ile listeleyin. Sonuç, nesnenin değişmez anahtar adlarından oluşan bir birleşimdir.

const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])

Bu Desen Neden Var

Çoğu zaman elinizde çalışma zamanında kullanılan bir nesne olur, ancak ayrı bir arayüzünüz olmaz. keyof typeof, nesnenin yapısını elle yazılmış ayrı bir tür olarak tekrarlamadan bir anahtar türü elde etmenizi sağlar.

const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2

Anahtarla Tür Güvenli Erişim

keyof typeof obj türündeki bir işlev parametresi, geçersiz anahtarları derleme zamanında reddeder; böylece içteki indekslenmiş erişimin güvenli olduğu garanti edilir.

const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
  return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key

Numaralandırma Benzeri Sabit Nesneler

Yaygın bir deyim şudur: bir as const nesnesini sözde numaralandırma olarak tanımlayın, ardından hem anahtar hem de değer türlerini bu nesneden türetin.

const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)

Anahtarlar ve Değerler

Aradaki ayrımı unutmayın: keyof typeof obj anahtar adlarını, typeof obj[keyof typeof obj] ise değer türlerini verir. API'nizin ihtiyaç duyduğu seçeneği kullanın.

const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)

Jenerik getProperty

Klasik tür güvenli getirici, bir anahtar parametresini K extends keyof T ile sınırlar ve T[K] döndürür; böylece sonuç türü, aranan özellikle tam olarak eşleşir.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)

Dönüş Türü Anahtarı İzler

Dönüş değeri T[K] olduğundan, her çağrının sonuç türü aktarılan belirli anahtara uyum sağlar: bir anahtar için sayı, başka bir anahtar için dize.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id")     // number
const nm = getProperty(u, "name")   // string
console.log(id, nm)

Geçersiz Anahtarlar Reddedilir

Nesnede bulunmayan bir anahtarın aktarılması derleme hatasına neden olur. Jenerik kısıtlaması, kod çalışmaya başlamadan önce bunu zorunlu kılar.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))

Tür Güvenli Bir Ayarlayıcı

Aynı mekanizma bir ayarlayıcı oluşturmak için de kullanılabilir: değer parametresi T[K] olur; böylece yalnızca o anahtar için doğru türde bir değer atayabilirsiniz.

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)

Hepsini Bir Araya Getirme

keyof typeof deseni ile jenerik T[K] erişimi, gerçek nesneler üzerinde güvenli ve yeniden kullanılabilir yardımcılar sağlar. Bunlar, türlendirilmiş yapılandırma okuyucularının, aramaların ve form yardımcılarının temelini oluşturur.

const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
  return theme[name]
}
console.log(color("danger")) // #f00

Kısa Bir Kontrol

typeof ile keyof kavramlarını birleştirme hakkındaki anlayışınızı sınayın.

Özet

keyof typeof value, ayrı bir arayüz yazmadan bir değerin gerçek anahtarlarından oluşan bir birleşim türetir ve indekslenmiş erişimi tür güvenli hâle getirir. Anahtar türlerini (keyof typeof obj) değer türlerinden (typeof obj[keyof typeof obj]) ayırın. getProperty<T, K extends keyof T>(obj, key): T[K] jenerik deseni, aranan türü tam olarak döndürür ve geçersiz anahtarları derleme zamanında reddeder.

Sıkça Sorulan Sorular

“typeof ve keyof'yu Birleştirme” dersi ücretsiz mi?

Evet — “typeof ve keyof'yu Birleştirme” 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.

“typeof ve keyof'yu Birleştirme” dersinde ne öğreneceğim?

Tür işleçlerini zincirleyerek kesin türler türetin. 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.

“typeof ve keyof'yu Birleştirme” 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