0Pricing
Frontend Academy · Leçon

Types de littéraux de modèles

Combinez les types de littéraux de chaînes avec la syntaxe des littéraux de modèles pour dériver des types tels que les noms d’événements, les chaînes de propriétés CSS et les chemins de routes d’API.

Types de littéraux de modèles est une leçon Frontend 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Que sont les types littéraux de modèle ?

TypeScript peut construire des types de chaînes à partir de littéraux de modèle au niveau des types. Combinés à des types union, ils permettent d’exprimer des milliers de chaînes valides sans les énumérer une par une.

Type littéral de modèle de base

Utilisez des chaînes entre accents graves en position de type — elles acceptent d’autres types comme interpolations.

type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!';  // OK
const b: Greeting = 'Hi, Alice!';     // Error

Combinaison d’unions

Lorsque vous interpolez une union, TypeScript crée le produit cartésien de toutes les combinaisons.

type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';

type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)

Inférence des noms d’événements

Dérivez les noms des gestionnaires d’événements à partir des noms d’événements — un cas d’utilisation classique dans le monde réel.

type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'

type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }

Types utilitaires de manipulation de chaînes

TypeScript fournit des utilitaires intégrés : Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.

type Hi = Capitalize<'hello'>;    // 'Hello'
type Yell = Uppercase<'hello'>;   // 'HELLO'
type Quiet = Lowercase<'HELLO'>;  // 'hello'
type Lower = Uncapitalize<'Hi'>;  // 'hi'

Types de propriétés CSS

Exprimez des types de chaînes similaires à ceux de CSS : valeurs en pixels, couleurs hexadécimales, pourcentages.

type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;

type Style = { padding: Px; color: Hex; width: Pct };

const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // Error

Inférence avec des littéraux de modèle

Le mot-clé infer peut extraire des parties d’un type de chaîne — ce qui est utile pour les analyseurs et les types de routes.

type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;

type Result = ExtractName<'Hello, Alice!'>;  // 'Alice'

Types de routes API

Des routes API sûres du point de vue du typage : extrayez les paramètres de chemin à partir d’un modèle de chaîne.

type PathParams<T extends string> =
  T extends `${string}/:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
    : T extends `${string}/:${infer Param}`
    ? { [K in Param]: string }
    : {};

type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }

Types de suggestion de classes Tailwind

Limitez les propriétés de chaîne aux valeurs connues du système de conception.

type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'

function Box(props: { className: TwSpacing }) { /* ... */ }

Limites et performances du compilateur

Les produits cartésiens de littéraux de modèle peuvent exploser (une union de 50 × 50 produit 2 500 chaînes). TypeScript compilera le code, mais l’inférence deviendra lente. Gardez l’alphabet réduit.

Distinguer les types littéraux de chaîne

Utilisez les littéraux de modèle comme une forme plus expressive de marquage : il s’agit toujours d’une chaîne, mais contrainte.

Vérification rapide

À quelle valeur l’expression type X = `on${Capitalize<'click' | 'focus'>}` s’évalue-t-elle ?

Récapitulatif : types littéraux de modèle

Construisez des types de chaînes à partir de littéraux de modèle avec des unions interpolées. Les produits cartésiens augmentent rapidement : gardez les alphabets réduits. Utilisez Capitalize/Uppercase/Lowercase/Uncapitalize. Combinez-les avec infer pour extraire des parties de chaînes. Ces types sont particulièrement adaptés aux noms d’événements, aux valeurs CSS, aux paramètres de routes et aux noms de classes d’un système de conception.

Questions Fréquemment Posées

La leçon « Types de littéraux de modèles » est-elle gratuite ?

Oui — le texte complet de « Types de 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Types de littéraux de modèles » ?

Combinez les types de littéraux de chaînes avec la syntaxe des littéraux de modèles pour dériver des types tels que les noms d’événements, les chaînes de propriétés CSS et les chemins de routes d’API. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 « Types de 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 Frontend Academy ?

Oui. Chaque leçon Frontend 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

  1. Types de littéraux de modèles
  2. Décorateurs et métadonnées
  3. TypeScript avec React : génériques, FC et hooks
  4. Mode strict et suppression de any
← Retour à Frontend Academy