CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Mapped type nedir?

Türlerin üzerinde dönen mapped types'ı öğrenirsin.

Mapped type nedir?

Mapped type, bir türün tüm özellikleri üzerinde dönen ve her birini dönüştüren bir tür yapısıdır. [K in keyof T] sözdizimi, T'nin her anahtarı K için bir özellik üretir. Sağ taraftaki tür ifadesi, orijinal değerin türü T[K] ile oynayarak yeni tür üretir.

type Ayni<T> = {
  [K in keyof T]: T[K];
};
// T'nin tüm özellikleri aynı türle
// kopyalanır

Mapped type'ın gücü

Mapped type, bir türü alıp her özelliğini aynı kurala göre dönüştürür. Değer türünü değiştirebilir, readonly ekleyebilir veya ? ile isteğe bağlı yapabilirsin. Bu, Partial veya Readonly gibi yerleşik utility types'ların temelidir; onları kendin de yazabilirsin.

Uygulama Tüm değerleri string yap

MetinYap<T> mapped type'ını yaz: { [K in keyof T]: string }. Ayar arayüzünü tema: string ve ses: number özellikleriyle tanımla. AyarMetin türünü MetinYap<Ayar> olarak tanımla. a değişkenine { tema: "koyu", ses: "acik" } nesnesini (tür AyarMetin) ata. a.tema'yı console.log ile yazdır.

Başlangıç kodu

index.ts
// MetinYap<T> mapped type tanımla
// T'nin her özelliğini string değerli yap
// Ayar arayüzünü tema ve ses ile tanımla
// AyarMetin türünü MetinYap<Ayar> olarak tanımla
// a değişkenine uygun nesneyi ata
// tema değerini yazdır

Örnek çözüm

index.ts
type MetinYap<T> = {
  [K in keyof T]: string;
};
interface Ayar {
  tema: string;
  ses: number;
}
type AyarMetin = MetinYap<Ayar>;
const a: AyarMetin = { tema: "koyu", ses: "acik" };
console.log(a.tema);

Beklenen çıktı

koyu

Soru ve cevaplar

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

1 Aşağıdaki mapped type ne yapar?

index.ts
type NumYap<T> = { [K in keyof T]: number };
  • T'nin tüm özelliklerini readonly yapar
  • T'nin tüm özelliklerini number türüne dönüştürür Doğru cevap
  • T'nin tüm özelliklerini çıkarır
  • T'nin tüm özelliklerini isteğe bağlı yapar

Açıklama: Sağ taraftaki tür number olduğundan, her özellik K için değer türü number olur. Özellik adları T'den gelir ama değer türü number'a dönüşür.

2 Mapped type gövdesi

Soru 
type Dize<T> = {
  [K in ____]: string;
};
Cevap 
type Dize<T> = {
  [K in keyof T]: string;
};

Açıklama: Mapped type, T'nin anahtarları üzerinde dönmeli; bu yüzden [K in keyof T] yazılır. Yalnızca T bir sınır değildir; string tüm adları kabul eder; keyof K yanlış yöndedir.

3 Mapped type parçaları

Kavram Anlamı
[K in keyof T] T'nin özellikleri üzerinde döner
T[K] Orijinal özelliğin değer türü
: string Yeni değer türü
type NumYap<T> Mapped type alias

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