CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

keyof ile indexing

keyof ile güvenli özellik erişimini öğrenirsin.

keyof ile indexing

keyof ile elde edilen tür, köşeli parantez içinde dizin erişimi için kullanılabilir. Kisi[keyof Kisi], Kisi'nin tüm özellik değer türlerinin birleşimini verir. Bu, bir nesneden güvenli özellik erişimi sağlar; yanlış anahtar derleme hatasıdır.

interface Kisi {
  ad: string;
  yas: number;
}
type DegerTuru = Kisi[keyof Kisi];
// string | number

Güvenli özellik erişimi

Bir fonksiyon k: keyof Kisi parametresi alırsa, gövdede o[k] erişimi tür güvenlidir. Çünkü derleyici k'nın geçerli bir özellik adı olduğunu bilir. Dönüş türü Kisi[keyof Kisi] olursa tüm olası değer türlerinin birleşimi döner.

Uygulama Anahtarla değer getir

Kisi arayüzünü ad: string ve yas: number ile tanımla. al(o: Kisi, k: keyof Kisi): Kisi[keyof Kisi] fonksiyonunu yaz; gövdesi return o[k]; olsun. kisi değişkenine { ad: "Ela", yas: 28 } ata. al(kisi, "ad") sonucunu console.log ile yazdır.

Başlangıç kodu

index.ts
// Kisi arayüzünü ad ve yas ile tanımla
// al fonksiyonu yaz: o Kisi, k Kisi'nin özellik adlarından biri
// dönüş türü tüm değer türlerinin birleşimi olsun
// gövde return o[k]; olsun
// kisi değişkenine { ad: "Ela", yas: 28 } ata
// kisi'den ad değerini al fonksiyonuyla getir ve yazdır

Örnek çözüm

index.ts
interface Kisi {
  ad: string;
  yas: number;
}
function al(o: Kisi, k: keyof Kisi): Kisi[keyof Kisi] {
  return o[k];
}
const kisi = { ad: "Ela", yas: 28 };
console.log(al(kisi, "ad"));

Beklenen çıktı

Ela

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Aşağıdaki kodda T ne olur?

index.ts
interface Kisi { ad: string; yas: number; }
type T = Kisi[keyof Kisi];
  • "ad" | "yas"
  • Kisi
  • any
  • string | number Doğru cevap

Açıklama: Kisi[keyof Kisi], tüm özellik değer türlerinin birleşimini verir. Kisi'nin özellikleri string ve number olduğundan sonuç string | number olur. Anahtar adlarını vermez.

2 Dizin erişim türü

Soru 
interface Kisi { ad: string; yas: number; }
function al(o: Kisi, k: keyof Kisi): Kisi[____] {
  return o[k];
}
Cevap 
interface Kisi { ad: string; yas: number; }
function al(o: Kisi, k: keyof Kisi): Kisi[keyof Kisi] {
  return o[k];
}

Açıklama: Tüm değer türlerini almak için köşeli paranteze keyof Kisi yazılır. string yalnızca bir türdür; Kisi yanlış tür; ad ise tek bir özellik adıdır.

3 keyof indexing parçaları

Kavram Anlamı
keyof Kisi Kisi'nin özellik adları
Kisi[keyof Kisi] Tüm değer türlerinin birleşimi
o[k] Güvenli özellik erişimi
al(kisi, "ad") Anahtarla değer getirme

Orta seviye bölümündeki tüm dersler

1 Sınıflar

  1. Class temelleri
  2. Constructor ve alanlar
  3. Metotlar
  4. Statik üyeler
  5. Özet - Sınıflar

2 Erişim belirteçleri

  1. public
  2. private
  3. protected
  4. Parametre özellikleri
  5. Özet - Erişim belirteçleri

3 Readonly özellikler

  1. readonly alanlar
  2. Readonly parametre
  3. Readonly vs const
  4. Özet - Readonly

4 Generic'ler

  1. Generic nedir?
  2. Generic fonksiyonlar
  3. Generic sınıflar
  4. Çoklu tür parametresi
  5. Özet - Generic'ler

5 Generic kısıtları

  1. extends kısıtı
  2. keyof kısıtı
  3. Default tür parametresi
  4. Özet - Generic kısıtları

6 Utility types

  1. Partial
  2. Required ve Pick
  3. Omit ve Record
  4. Özet - Utility types

7 keyof ve typeof

  1. keyof operatörü
  2. typeof operatörü
  3. keyof ile indexing
  4. Özet - keyof ve typeof

8 Mapped types

  1. Mapped type nedir?
  2. Readonly mapped type
  3. Optional mapped type
  4. Özet - Mapped types

9 Conditional types

  1. Conditional type nedir?
  2. Distributive conditional
  3. Conditional ile mantık
  4. Özet - Conditional types

10 infer

  1. infer anahtar kelimesi
  2. Promise'ten değer çıkarma
  3. Dizi eleman türü
  4. Özet - infer

11 Decorator'lar

  1. Decorator nedir?
  2. Method decorator
  3. Property decorator
  4. Decorator fabrikaları
  5. Özet - Decorator'lar

12 Modüller

  1. export ve import
  2. Default export
  3. Re-export
  4. Type-only import
  5. Özet - Modüller

13 Namespace'ler

  1. Namespace nedir?
  2. İç içe namespace
  3. Namespace vs module
  4. Özet - Namespace'ler

14 Declaration dosyaları

  1. .d.ts nedir?
  2. Ambient module
  3. Triple-slash directive
  4. Özet - Declaration dosyaları

15 İleri sınıflar

  1. abstract sınıf
  2. implements
  3. Get ve set
  4. Özet - İleri sınıflar

16 Type assertion

  1. as anahtar kelimesi
  2. angle bracket syntax
  3. Type assertion vs casting
  4. unknown'dan cast
  5. Özet - Type assertion

17 Proje: Kütüphane paketi

  1. Paket tasarımı
  2. Türleri dışa aktarma
  3. Generic yardımcılar
  4. Bildirim dosyası
  5. Birleştirme

18 Proje: Quiz uygulaması

  1. Soru modeli
  2. Soru havuzu
  3. Cevap kontrolü
  4. Skor hesaplama
  5. Birleştirme

19 Proje: Hava durumu

  1. Hava durumu modeli
  2. API yanıtı tipi
  3. Veri dönüştürme
  4. Görüntüleme
  5. Birleştirme

20 Orta seviye finali

  1. Meydan okuma 1: Sınıflar
  2. Meydan okuma 2: Generic'ler
  3. Meydan okuma 3: Tür sistemleri
  4. Meydan okuma 4: Mini uygulama