Remappage des clés et types littéraux de chaînes
Remappez les clés avec « as », construisez des clés à l’aide de littéraux de chaînes (Capitalize/Uncapitalize) et filtrez les propriétés selon des motifs de noms.
Remappage des clés et types littéraux de chaînes est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. 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 3 leçons au total.
Introduction
Objectif : utiliser le remappage des clés (la clause as) avec les types littéraux de modèle pour renommer, générer ou supprimer des propriétés selon des motifs de noms.
- Renommer les clés :
K as NewK - Filtrer les clés avec
never - Composer les noms :
`get${Capitalize<K>}`
Renommer les clés
Renommez les clés à l’aide du remappage. Exemple : convertissez les noms snake_case en camelCasee.
type Original = { first_name: string; last_name: string }
type Camelize<T> = {
[K in keyof T as K extends `${infer A}_${infer B}`
? `${A}${Capitalize<B>}`
: K]: T[K]
}
type UserCamel = Camelize<Original> // { firstName: string; lastName: string }Filtrer par préfixe
Les clés exclues sont supprimées. Modèle : filtrez les gestionnaires d’événements avec `on${string}`.
type Props = { onClick: () => void; onSubmit: () => void; title: string }
type WithoutHandlers<T> = {
[K in keyof T as K extends `on${string}` ? never : K]: T[K]
}
type Clean = WithoutHandlers<Props> // { title: string }Générer des méthodes
Générez des interfaces de programmation avec des noms modèles : le motif get${Capitalize<K>} sert à créer des accesseurs à partir des champs.
type Fields = "name" | "email"
type Getters<T extends string> = {
[K in T as `get${Capitalize<K>}`]: () => string
}
type ClientAPI = Getters<Fields>
// { getName: () => string; getEmail: () => string }Composer des motifs
Combinez plusieurs modèles pour générer des noms explicites et garantir une convention de nommage cohérente dans les grands projets.
type Route = `/${"" | `${string}`}`
type HttpMethod = "get" | "post"
type Endpoints<T extends string, M extends string> = {
[K in T as `${M}_${K}`]: { path: `/${K}`; method: Uppercase<M> }
}
type API = Endpoints<"users" | "login", HttpMethod>
// { get_users: { path: "/users"; method: "GET" }, post_login: { path: "/login"; method: "POST" } }Conseils et pièges
Conseils :
Le remappage est coûteux ; découpez les types complexes à l’aide d’alias.
Modèles simples pour les filtres : `on${string}`, `data-${string}`.
Utilisez les assistants de mise en majuscules et en minuscules.
Simplifiez l’API si la génération de noms devient excessive.
Vérification du filtrage par préfixe
Vérification rapide : Quel motif de type mappé supprime les propriétés commençant par on ?
Récapitulatif
Récapitulatif : renommez et filtrez avec le remappage des clés ; générez des clés avec les types littéraux de modèle ; supprimez les éléments indésirables.
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 « Remappage des clés et types littéraux de chaînes » est-elle gratuite ?
Oui — le texte complet de « Remappage des clés et types littéraux de chaînes » 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 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Remappage des clés et types littéraux de chaînes » ?
Remappez les clés avec « as », construisez des clés à l’aide de littéraux de chaînes (Capitalize/Uncapitalize) et filtrez les propriétés selon des motifs de noms. 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 3.
Combien de temps prend la leçon « Remappage des clés et types littéraux de chaînes » ?
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
- Types mappés avec +/-readonly et +/-?
- Remappage des clés et types littéraux de chaînes
- Typage de motifs de chaînes (paramètres de routes, noms d’événements)