Özet - Template literal types

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.

Örnek çözümü göster

type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${Mod}-${Renk}`;
const sinif: Sinif = "btn-acik-kirmizi";
console.log(sinif);

Kendini test et

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
- Plain string türü kullanmak
Cevabı göster

Template literal type ve union kullanmak — 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.

İki union'lı şablon

type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${____}-${Renk}`;

Cevabı göster

type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${Mod}-${Renk}`;

Template literal özeti

`...${T}...`

Şablon dize türü
union

Kombinasyon üretir
mapped

Anahtar başına değer
cartesian product

Tüm çiftler

Sıradaki ders: Recursive type nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler