TypeScriptGeneryki i typy zaawansowane
Typy szablonowe
Typy tekstowe budowane ze szablonów, jak `${A}-${B}`.
Przykład
#TypeScript
type Size = 'sm' | 'md' | 'lg'
type Variant = 'primary' | 'ghost'
type ButtonClass = `btn-${Variant}-${Size}`
// type ButtonClass = "btn-primary-sm" | "btn-primary-md" | ... (6 kombinacji)
function buttonClass(variant: Variant, size: Size): ButtonClass {
return `btn-${variant}-${size}`
}
console.log(buttonClass('primary', 'lg'))Wynik
btn-primary-lg
Definicja i zastosowanie
#Typy szablonowe używają składni szablonów JavaScriptu, ale na poziomie typów. `btn-${Size}` przy Size = "sm" | "lg" daje unię "btn-sm" | "btn-lg". Kompilator rozwija wszystkie kombinacje.
Dzięki temu możesz precyzyjnie typować nazwy klas CSS, zdarzeń, kluczy tłumaczeń czy ścieżek. Literówka w takim napisie zostanie wykryta od razu.
TypeScript ma też wbudowane typy do zmiany wielkości liter: Uppercase, Lowercase, Capitalize i Uncapitalize, które przydają się w połączeniu z szablonami.
Składnia
#Składnia
type Nazwa = `prefiks-${Typ}`Więcej przykładów
#TypeScript
type Field = 'email' | 'password'
type ChangeEvent = `${Field}Changed`
// type ChangeEvent = "emailChanged" | "passwordChanged"
const event: ChangeEvent = 'emailChanged'
console.log(event)Wynik
emailChanged
Dobre praktyki
#- Przy dużych uniach liczba kombinacji rośnie szybko. Zbyt wiele kombinacji spowalnia kompilator.
- Typy szablonowe świetnie sprawdzają się przy kluczach tłumaczeń, np.
`nav_${string}`.
Powiązane hasła
#- Typy literałoweTypy dopuszczające tylko konkretne wartości, np. "easy" | "hard".
- Typy mapowaneTworzą nowy typ obiektu, przekształcając każdy klucz innego typu.
- Unia (A | B)Typ, który może być jednym z kilku typów.
- as constZamraża literały w wyrażeniu: najwęższe typy i pola tylko do odczytu.
- Uppercase, Lowercase, Capitalize, UncapitalizeWbudowane typy zmieniające wielkość liter w typach tekstowych, np. "gold" na "GOLD".
Widzisz błąd albo brakuje przykładu? Napisz do nas.