Principes des types littéraux de modèles
Créer des types de chaînes à partir d’unions et d’espaces réservés.
Principes des types littéraux de modèles est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.
Les chaînes au niveau des types
Les types littéraux de modèle construisent de nouveaux types littéraux de chaînes en combinant d’autres types de chaînes. Ils utilisent la même syntaxe avec accents graves et espaces réservés que les chaînes de modèle à l’exécution, mais opèrent exclusivement sur les types.
Un type littéral de modèle simple
Imaginez un alias de type Greeting défini comme un littéral de modèle contenant le texte Hello, , suivi d’un espace réservé pour le type Name. Si Name est le littéral 'Ada', alors Greeting est le type littéral 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)Les espaces réservés intègrent d’autres types
Dans l’espace réservé, vous pouvez placer n’importe quel type semblable à une chaîne : un littéral, un paramètre de type ou une union. TypeScript le substitue dans le texte environnant pour former un nouveau type littéral.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)La combinaison d’unions multiplie les variantes
Lorsqu’un espace réservé contient une union, le modèle est développé pour chaque membre. Un modèle combinant 'a' | 'b' avec un suffixe fixe produit une union de chaque combinaison.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)Plusieurs espaces réservés se combinent
Deux espaces réservés contenant des unions forment un produit cartésien. La combinaison des tailles 'sm' | 'lg' avec les couleurs 'red' | 'blue' au moyen d’un séparateur produit quatre types littéraux.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)Pourquoi est-ce utile
Les types littéraux de modèle vous permettent de décrire précisément des familles de chaînes — noms de classes CSS, noms d’événements et chemins de routes — afin que le compilateur rejette les chaînes mal formées avant l’exécution.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)Les nombres et les booléens sont convertis
Les types qui ne sont pas des chaînes et qui sont placés dans un type littéral de modèle sont convertis en leur forme textuelle. Le littéral numérique 42 devient le texte 42 dans le type de chaîne obtenu.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)Utiliser un espace réservé générique
Une fonction générique peut construire un type de retour littéral de modèle à partir du type littéral de son argument, de sorte que la chaîne précise soit connue à chaque emplacement d’appel.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeContraindre les entrées
Vous pouvez exiger qu’une valeur corresponde à un type littéral de modèle. Seules les chaînes conformes au schéma décrit sont acceptées, ce qui permet de détecter les fautes de frappe lors de la compilation.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignableUne chaîne large brise le schéma
Si un espace réservé est du type large string plutôt qu’un littéral, l’ensemble du modèle devient string. Pour conserver la précision, les entrées doivent être des littéraux, souvent grâce à as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)Où les utiliser
Les types littéraux de modèle sont parfaits partout où les chaînes suivent une structure : classes utilitaires CSS, identifiants préfixés, clés de requêtes et noms d’événements. Ils transforment les conventions de chaînes en contrats vérifiés par le compilateur.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)Vérification rapide
Testez votre compréhension des notions fondamentales des types littéraux de modèle.
Récapitulatif
Les types littéraux de modèle construisent des types littéraux de chaînes en substituant des espaces réservés dans le texte environnant. Les espaces réservés contenant des unions sont développés pour chaque combinaison, et plusieurs unions forment un produit cartésien. Les littéraux qui ne sont pas des chaînes sont convertis en leur forme textuelle. Un espace réservé large string réduit le résultat à string ; des entrées littérales, souvent fournies avec as const, sont donc nécessaires pour obtenir des types précis. Ces types permettent de faire vérifier les conventions de chaînes par le compilateur.
Questions Fréquemment Posées
La leçon « Principes des types littéraux de modèles » est-elle gratuite ?
Oui — le texte complet de « Principes des types littéraux de modèles » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Principes des types littéraux de modèles » ?
Créer des types de chaînes à partir d’unions et d’espaces réservés. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Principes des types littéraux de modèles » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?
Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Principes des types littéraux de modèles
- Modéliser des chaînes structurées
- Unions de chaînes et autocomplétion
- Types intrinsèques de manipulation des chaînes