Özet - Utility types

Utility types'larla esnek bir form tipi yazarsın.

Özet - Utility types

Utility types, var olan türlerden yeni türler üretir. Partial hepsini isteğe bağlı, Required hepsini zorunlu yapar. Pick belirli özellikleri seçer, Omit belirli özellikleri çıkarır. Record anahtar-değer eşlemesi kurar. Birlikte kullanılarak esnek form tipleri yazılabilir.

type FormAlan = Pick<Uye, "ad" | "eposta">;
type Guncelleme = Partial<FormAlan>;

Uygulama Esnek form tipi

Uye arayüzünü ad: string, eposta: string ve yas: number ile tanımla. FormTip türünü Pick<Uye, "ad" | "eposta"> olarak tanımla. FormGuncelle türünü Partial<FormTip> olarak tanımla. guncelle(u: FormGuncelle): void fonksiyonu yaz; gövdede u.ad varsa console.log ile yazdır. guncelle({ ad: "Mert" }) çağrısı yap.

Örnek çözümü göster

interface Uye {
  ad: string;
  eposta: string;
  yas: number;
}
type FormTip = Pick<Uye, "ad" | "eposta">;
type FormGuncelle = Partial<FormTip>;
function guncelle(u: FormGuncelle): void {
  if (u.ad) {
    console.log(u.ad);
  }
}
guncelle({ ad: "Mert" });

Kendini test et

Bir formdan yalnızca <code>ad</code> ve <code>eposta</code> alanlarını alıp hepsini isteğe bağlı yapmak için hangi kombinasyon kullanılır?
- Omit<Partial<Uye>, "eposta">
- Partial<Pick<Uye, "ad" | "eposta">>
- Required<Omit<Uye, "ad">>
- Pick<Record<string, number>, "ad">
Cevabı göster

Partial<Pick<Uye, "ad" | "eposta">> — Önce Pick ile ad ve eposta seçilir, sonra Partial ile bu ikisi isteğe_optional yapılır. Diğer seçenekler ya yanlış alanları tutar ya da isteğe optional kılmaz.

Form güncelleme türü

interface Uye { ad: string; eposta: string; yas: number; }
type FormGuncelle = ____<Pick<Uye, "ad" | "eposta">>;

Cevabı göster

interface Uye { ad: string; eposta: string; yas: number; }
type FormGuncelle = Partial<Pick<Uye, "ad" | "eposta">>;

Utility types eşleştir

Partial<T>

Tüm özellikleri isteğe bağlı
Required<T>

Tüm özellikleri zorunlu
Pick<T, K>

K özelliklerini seçer
Omit<T, K>

K özelliklerini çıkarır

Sıradaki ders: keyof operatörü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler