Unions de chaînes et autocomplétion
Obtenir l’autocomplétion de l’éditeur pour les valeurs de chaînes connues.
Unions de chaînes et autocomplétion est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Les unions alimentent l’autocomplétion
Une union de littéraux de chaînes a un double rôle : elle restreint les valeurs autorisées et alimente l’autocomplétion de votre éditeur. Mais vous souhaitez parfois obtenir des suggestions tout en conservant la liberté de transmettre n’importe quelle chaîne — une astuce ingénieuse permet de le faire.
Une union simple de littéraux de chaînes
Déclarez une union de chaînes autorisées. L’éditeur propose exactement ces options et les valeurs invalides provoquent des erreurs de compilation.
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // ErrorL’autocomplétion dans l’éditeur
Lorsqu’un paramètre est une union de littéraux de chaînes, la saisie dans l’appel affiche ses membres exacts. C’est l’une des fonctionnalités ergonomiques les plus appréciées de TypeScript.
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blueLa limitation
Une union stricte interdit toute valeur absente de la liste. Vous souhaitez parfois suggérer les valeurs courantes tout en autorisant des chaînes personnalisées arbitraires — une union ordinaire ne peut pas faire les deux.
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))L’élargissement fait perdre les suggestions
Si vous utilisez simplement string, toutes les valeurs sont acceptées, mais l’autocomplétion disparaît complètement. Vous échangez toutes les indications contre une flexibilité totale — ce n’est pas idéal.
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestionsL’astuce de string et des littéraux
L’astuce consiste à unir vos littéraux avec string & {}. Les littéraux apparaissent toujours dans l’autocomplétion, tandis que string & {} autorise toute autre chaîne sans réduire l’union.
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)Pourquoi string et l’objet vide fonctionnent
Normalement, 'red' | string se simplifie en string seul, ce qui efface les littéraux. L’intersection avec {} crée un type légèrement différent que TypeScript conserve séparément ; les littéraux restent donc disponibles pour la complétion, tandis que toute chaîne reste acceptée.
type A = "red" | string // collapses to string — no hints
type B = "red" | (string & {}) // keeps "red" as a suggestion
const x: B = "red"
console.log(x)Un utilitaire réutilisable
Encapsulez l’astuce dans un alias générique afin que l’intention soit claire et réutilisable dans toute votre base de code.
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)L’appliquer à une fonction
Utilisez l’utilitaire dans une API pour suggérer aux appelants les entrées courantes tout en continuant d’accepter des valeurs personnalisées.
type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home")) // suggested
console.log(setIcon("my-icon")) // allowedQuand utiliser cette astuce
Utilisez-la lorsqu’une API possède des valeurs connues, mais doit rester ouverte : noms d’icônes, unités CSS, jetons de thème et préréglages de framework. Pour les ensembles fermés, préférez une union stricte afin de bénéficier d’une sécurité complète.
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)Compromis
L’astuce conserve les suggestions, mais réduit la sécurité : les fautes de frappe dans les chaînes personnalisées ne sont plus détectées. Utilisez-la délibérément lorsque l’ouverture est une fonctionnalité, et non par défaut.
type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)Vérification rapide
Testez votre compréhension de l’astuce d’autocomplétion.
Récapitulatif
Les unions de littéraux de chaînes alimentent l’autocomplétion de l’éditeur et restreignent les valeurs, mais une union stricte interdit les chaînes personnalisées tandis que string supprime toutes les indications. L’astuce T | (string & {}) conserve les littéraux comme suggestions tout en acceptant n’importe quelle chaîne. Encapsulez-la dans un utilitaire LiteralUnion<T> et utilisez-la uniquement lorsque l’ouverture est voulue : elle sacrifie la sécurité qui permet de détecter les fautes de frappe.
Questions Fréquemment Posées
La leçon « Unions de chaînes et autocomplétion » est-elle gratuite ?
Oui — le texte complet de « Unions de chaînes et autocomplétion » 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 « Unions de chaînes et autocomplétion » ?
Obtenir l’autocomplétion de l’éditeur pour les valeurs de chaînes connues. 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 3 sur 4.
Combien de temps prend la leçon « Unions de chaînes et autocomplétion » ?
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