TypeScriptGénériques et types avancés
Types littéraux de gabarit
Des types textuels construits à partir de gabarits, comme `${A}-${B}`.
Exemple
#TypeScript
type Size = 'sm' | 'md' | 'lg'
type Variant = 'primary' | 'ghost'
type ButtonClass = `btn-${Variant}-${Size}`
// type ButtonClass = "btn-primary-sm" | "btn-primary-md" | ... (6 combinaisons)
function buttonClass(variant: Variant, size: Size): ButtonClass {
return `btn-${variant}-${size}`
}
console.log(buttonClass('primary', 'lg'))Résultat
btn-primary-lg
Définition et utilisation
#Les types littéraux de gabarit utilisent la syntaxe des templates de JavaScript, mais au niveau des types. `btn-${Size}` avec Size = "sm" | "lg" donne l’union "btn-sm" | "btn-lg". Le compilateur développe toutes les combinaisons.
Cela permet de typer précisément des noms de classes CSS, des événements, des clés de traduction ou des chemins. Une faute de frappe dans une telle chaîne est détectée immédiatement.
TypeScript possède aussi des types intégrés pour changer la casse : Uppercase, Lowercase, Capitalize et Uncapitalize, qui sont utiles combinés avec les gabarits.
Syntaxe
#Syntaxe
type Name = `prefix-${Type}`Plus d’exemples
#TypeScript
type Field = 'email' | 'password'
type ChangeEvent = `${Field}Changed`
// type ChangeEvent = "emailChanged" | "passwordChanged"
const event: ChangeEvent = 'emailChanged'
console.log(event)Résultat
emailChanged
Bonnes pratiques
#- Avec de grandes unions, le nombre de combinaisons augmente vite. Trop de combinaisons ralentissent le compilateur.
- Les types littéraux de gabarit sont parfaits pour les clés de traduction, par ex.
`nav_${string}`.
Entrées associées
#- Types littérauxDes types qui n’autorisent que des valeurs précises, par ex. "easy" | "hard".
- Types mappésCréent un nouveau type d’objet en transformant chaque clé d’un autre type.
- Uppercase, Lowercase, Capitalize, UncapitalizeTypes intégrés qui changent la casse des lettres dans les types textuels, par ex. "gold" en "GOLD".
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.