Özet - Template literal types
- TypeScript kursu
- İleri seviye
- Ders 8/57
- 4 dk
Template literal'larla bir CSS sınıf adı üreteci yazarsın.
Özet - Template literal types
Bu grupta template literal type'ları öğrendin: backtick ve ${} ile tür seviyesinde şablon dize oluşturulur; union'lar cartesian product üretir; mapped type ile her anahtar için template literal değer veya anahtar üretilir. Birlikte CSS sınıf adı gibi sabit seçenekli adları tür güvenli şekilde tanımlayabilirsin.
type Renk = "kirmizi" | "mavi";
type Mod = "acik" | "koyu";
type Sinif = `btn-${Mod}-${Renk}`;Uygulama CSS sınıf üreteci yaz
Mod adında union tanımla: "acik" | "koyu". Renk adında union tanımla: "kirmizi" | "mavi". Sinif adında template literal type tanımla: `btn-${Mod}-${Renk}`. sinif değişkeni Sinif türünde ve değeri "btn-acik-kirmizi" olsun. sinif değerini console.log ile yazdır.
Başlangıç kodu
// Mod adinda union tanimla
// Renk adinda union tanimla
// Sinif adinda template literal tur tanimla
// sinif degiskenini tanimla ve deger ata
// sinif yazdirÖrnek çözüm
type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${Mod}-${Renk}`;
const sinif: Sinif = "btn-acik-kirmizi";
console.log(sinif);Beklenen çıktı
btn-acik-kirmizi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 CSS sınıf adlarını tür güvenli şekilde tanımlamanın en iyi yolu nedir?
- any türüne bırakmak
- Number türü kullanmak
- Template literal type ve union kullanmak Doğru cevap
- Plain string türü kullanmak
Açıklama: Template literal type ve union birlikte sabit seçenekli adların yalnızca geçerli kombinasyonlarını kabul eden türler üretir; bu, en tür güvenli yoldur.
2 İki union'lı şablon
type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${____}-${Renk}`;type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${Mod}-${Renk}`;Açıklama: Şablona ilk yerleştirilen union Mod'dur; böylece `btn-acik-kirmizi` gibi kombinasyonlar üretilir.
3 Template literal özeti
| Kavram | Anlamı |
|---|---|
`...${T}...` |
Şablon dize türü |
union |
Kombinasyon üretir |
mapped |
Anahtar başına değer |
cartesian product |
Tüm çiftler |