TypeScript Academy · Leçon

Modèles pratiques avec satisfies

Appliquer satisfies aux objets de configuration et aux tables de correspondance.

Leçon 4 sur 413 étapes

Modèles pratiques avec satisfies est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Valider une palette de couleurs

Pour une palette, un modèle courant consiste à utiliser satisfies Record<string, Color> : chaque valeur est vérifiée pour garantir qu’il s’agit d’une couleur valide, tandis que les clés restent exactes pour l’autocomplétion.

type Color = "red" | "green" | "blue";
const palette = {
  primary: "blue",
  secondary: "green"
} satisfies Record<string, Color>;
console.log(palette.primary);

Détecter les valeurs de palette incorrectes

Si une valeur n’est pas un Color valide, satisfies signale une erreur, tandis que les clés restent précisément typées.

type Color = "red" | "green" | "blue";
// const bad = { primary: "purple" } satisfies Record<string, Color>; // Error
const ok = { primary: "red" } satisfies Record<string, Color>;
console.log(ok.primary);

Conserver l’autocomplétion des clés

Comme les clés inférées sont "primary" | "secondary", votre éditeur les propose en autocomplétion, contrairement à une annotation Record simple, qui ferait perdre les clés spécifiques.

type Color = "red" | "green" | "blue";
const palette = { primary: "red", accent: "blue" } satisfies Record<string, Color>;
// palette.<autocomplete: primary, accent>
console.log(palette.accent);

Valider une table de routes

Les tables de routes en bénéficient également : les valeurs doivent correspondre à la structure d’un gestionnaire, tandis que les noms de routes restent connus pour les fonctions d’aide à la navigation.

type Route = { method: "GET" | "POST"; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  login: { method: "POST", path: "/login" }
} satisfies Record<string, Route>;
console.log(routes.login.method);

Indexer la table

Comme les clés sont préservées, vous pouvez créer un type regroupant les noms de routes valides et indexer le type de la table en toute sécurité.

type Route = { method: string; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  about: { method: "GET", path: "/about" }
} satisfies Record<string, Route>;
type RouteName = keyof typeof routes; // "home" | "about"
const pick: RouteName = "about";
console.log(routes[pick].path);

Configuration typée avec des valeurs de structures différentes

satisfies fonctionne également lorsque les valeurs ont des structures différentes. Utilisez un type union comme contrainte, et chaque valeur sera validée par rapport à cette union.

type Setting = number | boolean | string;
const config = {
  retries: 3,
  verbose: true,
  region: "eu"
} satisfies Record<string, Setting>;
console.log(config.retries, config.verbose);

Tables de correspondance semblables à des énumérations

Créez une table de correspondance validée par rapport à un type de valeur, tout en conservant chaque entrée exacte pour une utilisation ultérieure.

type Status = "active" | "inactive";
const userStatus = {
  alice: "active",
  bob: "inactive"
} satisfies Record<string, Status>;
const s: "active" = userStatus.alice;
console.log(s);

Associer à as const

Combinez as const et satisfies pour obtenir des données profondément immuables et validées : as const les fige, tandis que satisfies les vérifie.

type Color = "red" | "blue";
const theme = {
  primary: "red",
  secondary: "blue"
} as const satisfies Record<string, Color>;
console.log(theme.primary);

Valider des plages numériques par le typage

Vous pouvez limiter les valeurs à une union de littéraux numériques afin de modéliser des ensembles d’options fixes, validés au moment de leur définition.

type Level = 1 | 2 | 3;
const levels = {
  easy: 1,
  medium: 2,
  hard: 3
} satisfies Record<string, Level>;
console.log(levels.hard);

Une table de flags de fonctionnalité

Voici une configuration pratique de flags de fonctionnalité : les clés sont les noms des flags proposés en autocomplétion, et les valeurs booléennes sont validées par satisfies.

const flags = {
  newDashboard: true,
  betaSearch: false
} satisfies Record<string, boolean>;
type Flag = keyof typeof flags;
const f: Flag = "betaSearch";
console.log(flags[f]);

Pourquoi ce modèle est efficace

Pour les palettes, les routes et les flags, satisfies Record<...> fournit des valeurs validées ainsi que des clés et des littéraux précis : c’est le compromis idéal au quotidien pour une configuration typée.

type Color = "red" | "green" | "blue";
const ui = { brand: "green", warn: "red" } satisfies Record<string, Color>;
console.log(Object.keys(ui).join(","));

Vérification rapide : satisfies en pratique

Vérifiez votre compréhension des modèles pratiques utilisant satisfies.

Récapitulatif : modèles pratiques avec satisfies

Vous avez appliqué satisfies Record<string, Color> à des palettes, des tables de routes, des flags et des tables de correspondance, en conservant les clés et les littéraux exacts pour l’autocomplétion tout en validant chaque valeur.

type Color = "red" | "blue";
const theme = { bg: "blue", fg: "red" } satisfies Record<string, Color>;
console.log(theme.bg, theme.fg);
Gratuit pour commencer

Apprends TypeScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
101
Leçons
352

Questions Fréquemment Posées

La leçon « Modèles pratiques avec satisfies » est-elle gratuite ?

Oui — le texte complet de « Modèles pratiques avec satisfies » 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 « Modèles pratiques avec satisfies » ?

Appliquer satisfies aux objets de configuration et aux tables de correspondance. 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 4 sur 4.

Combien de temps prend la leçon « Modèles pratiques avec satisfies » ?

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

  1. Pourquoi satisfies existe
  2. satisfies ou annotation de type
  3. satisfies ou assertion as
  4. Modèles pratiques avec satisfies
← Retour à TypeScript Academy