TypeScript Academy · Leçon

Sécurité du typage de l’interpolation

Extraire et exiger les variables d’interpolation présentes dans les chaînes.

Sécurité du typage de l’interpolation est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Interpolation sûre du point de vue des types

Les messages contiennent souvent des espaces réservés comme "Hello, {name}". L’internationalisation sûre du point de vue des types extrait les noms de ces espaces réservés du type de chaîne du message et vous oblige à fournir les arguments correspondants.

L’objectif

À partir du type littéral d’un message, nous voulons calculer l’objet des variables dont il a besoin, afin que t("greet", { name: "Ada" }) soit imposé et que l’absence de name provoque une erreur de compilation.

Extraction d’un espace réservé

Un type conditionnel de littéral de modèle extrait le nom de variable d’une chaîne contenant un seul espace réservé. Dans le code réel, le motif s’écrit avec des accents graves sous la forme suivante : chaîne, accolade ouvrante, infer V, accolade fermante, chaîne. Nous représentons ce comparateur par BraceMatch ci-dessous.

// Real TS pattern (backtick template literal):
//   matches any text, then {V}, then any text; infers V.

type Var<S extends string> =
  S extends BraceMatch<infer V> ? V : never;

type A = Var<"Hello, {name}">; // "name"

Extraction de plusieurs espaces réservés

Récursivement, recueillez chaque espace réservé pour former une union. Le motif capture une variable et le reste de la chaîne, puis applique de nouveau la récursion au reste.

// Pattern: any text, {V}, then Rest tail -- infer V and Rest.

type Vars<S extends string> =
  S extends BraceMatchRest<infer V, infer Rest>
    ? V | Vars<Rest>
    : never;

type B = Vars<"Hi {first} {last}!">; // "first" | "last"

Des noms à un objet d’arguments

Transformez l’union des noms en un type objet obligatoire avec un type mappé.

type ArgsOf<S extends string> = {
  [K in Vars<S>]: string | number;
};

type G = ArgsOf<"Hello, {name}">;
// { name: string | number }

Aucun espace réservé, aucun argument

Lorsqu’un message ne contient aucun espace réservé, Vars vaut never, et l’objet d’arguments est donc vide. Dans ce cas, nous pouvons rendre le paramètre d’arguments facultatif.

type C = Vars<"Goodbye">;       // never
type D = ArgsOf<"Goodbye">;     // {} (empty)

Une fonction de traduction typée

Faites dépendre le paramètre d’arguments de la clé choisie en recherchant le littéral du message et en calculant ses arguments.

declare const messages: {
  greet: "Hello, {name}";
  invite: "Join {count} others";
};

declare function t<K extends keyof typeof messages>(
  key: K,
  args: ArgsOf<(typeof messages)[K]>
): string;

La vérification en action

Le compilateur exige maintenant exactement les variables déclarées par chaque message.

t("greet", { name: "Ada" });   // ok
t("greet", {});                 // Error: name is missing
t("invite", { count: 3 });      // ok
t("invite", { name: "x" });     // Error: count missing, name unexpected

Arguments facultatifs pour les messages simples

Utilisez une surcharge conditionnelle afin que les messages sans espaces réservés n’exigent aucun second argument.

type MaybeArgs<S extends string> =
  Vars<S> extends never ? [] : [args: ArgsOf<S>];

declare function t2<K extends keyof typeof messages>(
  key: K,
  ...rest: MaybeArgs<(typeof messages)[K]>
): string;

Délimiteurs personnalisés

Si votre catalogue utilise {{name}} ou %{name}, adaptez le motif de type littéral de modèle dans Vars en conséquence. La technique reste la même ; seul le littéral environnant change.

Pourquoi est-ce important

Les variables d'interpolation manquantes ou mal saisies sont une source classique de chaînes d'interface défectueuses ("Hello, undefined"). Les extraire au niveau des types transforme ces problèmes en erreurs de compilation et documente le contrat de chaque message.

Vérification rapide

Évaluez votre compréhension de la sécurité des types d'interpolation.

Récapitulatif

En identifiant par motif les types littéraux des messages avec des littéraux de modèle et infer, vous extrayez les noms des paramètres de substitution dans une union, vous les associez à un objet d'arguments obligatoires et vous obligez la fonction de traduction à exiger exactement ces variables, avec des arguments facultatifs lorsqu'il n'y en a aucune.

Questions Fréquemment Posées

La leçon « Sécurité du typage de l’interpolation » est-elle gratuite ?

Oui — le texte complet de « Sécurité du typage de l’interpolation » 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 « Sécurité du typage de l’interpolation » ?

Extraire et exiger les variables d’interpolation présentes dans les chaînes. 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 2 sur 4.

Combien de temps prend la leçon « Sécurité du typage de l’interpolation » ?

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

← Retour à TypeScript Academy