Modéliser des chaînes structurées
Imposer des formats tels que les noms d’événements et les chemins de routes.
Modéliser des chaînes structurées 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.
Imposer des formats de chaînes
De nombreuses chaînes des applications réelles suivent une structure : noms de gestionnaires d’événements, chemins de routes d’API et variables CSS. Les types littéraux de modèle vous permettent de modéliser ces formats afin que le compilateur les impose.
Modéliser les noms de gestionnaires d’événements
Un nom de gestionnaire se présente souvent comme on suivi d’un événement commençant par une majuscule. En utilisant l’utilitaire intrinsèque Capitalize dans un modèle, l’événement 'click' correspond au nom de gestionnaire 'onClick'.
type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)Pourquoi Capitalize est important ici
Sans Capitalize, le modèle produirait 'onclick'. Le type intrinsèque met le premier caractère du littéral en majuscule et produit des noms de gestionnaires idiomatiques en camelCase.
type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)Générer une carte de gestionnaires
Combinez des clés littérales de modèle avec un type mappé pour générer un type d’objet contenant des gestionnaires — une fonction typée par événement, avec des noms correctement formatés.
type Events = "click" | "hover"
type Handlers = {
[E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)Modéliser les chemins de routes
Les routes d’API partagent une forme composée d’une barre oblique initiale, d’une ressource et d’un segment d’identifiant. Un modèle combinant du texte fixe avec un espace réservé capture les chemins valides.
type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)Chemins paramétrés
Ajoutez un espace réservé pour un identifiant dynamique. Un modèle composé d’une barre oblique, d’une ressource, d’une autre barre oblique, puis d’un segment d’identifiant générique modélise des chemins tels qu’un chemin users suivi d’un identifiant numérique.
type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
return "/users/" + id
}
console.log(userPath(42)) // /users/42Imposer les formats lors de la compilation
En typant un paramètre comme un type littéral de modèle, vous rejetez toute chaîne qui ne respecte pas la structure — une protection contre les routes ou les clés mal formées.
type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")Composer des noms de variables CSS
Les propriétés personnalisées CSS suivent une convention de nommage. Un modèle avec deux tirets initiaux et un espace réservé pour un jeton modélise des noms tels que celui d’une variable contenant un jeton de couleur.
type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)Découper avec l’inférence
Les types littéraux de modèle peuvent également analyser des chaînes : avec les types conditionnels et infer, vous extrayez des parties d’une chaîne structurée au niveau des types — par exemple, la méthode d’une chaîne représentant un point de terminaison.
type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)Bénéfices concrets
Les types de chaînes structurées détectent des catégories entières de bogues : un nom de gestionnaire mal orthographié, une route inconnue ou un jeton CSS incorrect deviennent des erreurs de compilation plutôt que des échecs silencieux à l’exécution.
type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))Les garder lisibles
Aussi puissants soient-ils, les types de modèles profondément imbriqués nuisent à la lisibilité. Donnez un nom aux alias de types intermédiaires afin que la structure reste claire pour la personne qui lira le code ensuite.
type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)Vérification rapide
Testez votre compréhension de la modélisation des chaînes structurées.
Récapitulatif
Les types littéraux de modèle modélisent les chaînes structurées — noms de gestionnaires (on + Capitalize appliqué à un événement), chemins de routes et variables CSS — et imposent ces formats lors de la compilation. Combinés aux types mappés, ils génèrent des cartes de gestionnaires ; associés aux types conditionnels et à infer, ils analysent les chaînes. Donnez un nom aux alias intermédiaires pour conserver la lisibilité des schémas complexes.
Questions Fréquemment Posées
La leçon « Modéliser des chaînes structurées » est-elle gratuite ?
Oui — le texte complet de « Modéliser des chaînes structurées » 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éliser des chaînes structurées » ?
Imposer des formats tels que les noms d’événements et les chemins de routes. 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 « Modéliser des chaînes structurées » ?
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