Combiner clés connues et dynamiques
Mélanger en toute sécurité des propriétés fixes et des signatures d’index.
Combiner clés connues et dynamiques 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.
Fixe et flexible
Un objet possède souvent quelques propriétés garanties ainsi qu’un ensemble ouvert d’éléments supplémentaires. TypeScript vous permet de déclarer des propriétés nommées et une signature d’index dans un même type — avec une contrainte importante.
Une clé connue à côté d’une signature
Ici, length est toujours présente, tandis que toute autre clé de type chaîne correspond à un nombre. La propriété nommée et la signature d’index coexistent.
interface NumberMap {
length: number
[key: string]: number
}
const m: NumberMap = { length: 2, a: 1, b: 1 }
console.log(m.length, m.a)La contrainte de compatibilité
Le point important est le suivant : le type de chaque propriété fixe doit pouvoir être affecté au type de valeur de la signature d’index. La signature d’index est une promesse concernant toutes les clés ; chaque clé nommée doit donc la respecter.
interface Valid {
id: number // ok: number matches the signature
[key: string]: number
}
const v: Valid = { id: 1, score: 99 }
console.log(v.id + v.score)Lorsque la contrainte est violée
Si le type d’une propriété fixe ne correspond pas au type de valeur de l’index, TypeScript la refuse. Une propriété nommée par une chaîne ne peut pas appartenir à un dictionnaire dont les valeurs sont numériques.
// interface Broken {
// name: string // Error: string not assignable to number
// [key: string]: number
// }Élargir le type de valeur de l’index
Pour autoriser plusieurs types de propriétés fixes, élargissez la signature d’index en utilisant une union qui les couvre tous. Ainsi, un nom de type chaîne et des scores numériques sont tous deux acceptés.
interface Record {
name: string
[key: string]: string | number
}
const r: Record = { name: "ana", score: 10 }
console.log(r.name, r.score)Propriétés fixes facultatives
Les propriétés fixes peuvent être facultatives avec ?. Lorsqu’elles sont présentes, elles doivent tout de même être compatibles avec la signature d’index.
interface Config {
id: string
label?: string
[key: string]: string | undefined
}
const c: Config = { id: "x" }
console.log(c.label) // undefinedPourquoi une propriété facultative nécessite undefined
Comme une propriété facultative peut être absente, son type effectif inclut undefined. La signature d’index doit donc également autoriser undefined, sinon TypeScript signale un problème avec le membre facultatif.
interface Safe {
title?: string
[key: string]: string | undefined
}
const s: Safe = {}
for (const k in s) console.log(s[k])Différents types de valeurs grâce aux unions
Voici un objet de paramètres réaliste : un indicateur booléen connu, une chaîne connue et des valeurs supplémentaires arbitraires. L’union de la signature couvre le type de chaque propriété fixe.
interface Settings {
enabled: boolean
theme: string
[key: string]: boolean | string
}
const s: Settings = { enabled: true, theme: "dark", lang: "en" }
console.log(s.enabled, s.lang)Index numérique avec des clés connues
La contrainte s’applique également aux signatures d’index numériques. Une propriété numérique nommée doit correspondre au type de valeur de l’index numérique.
interface Sparse {
count: number
[index: number]: number
}
const sp: Sparse = { count: 1, 0: 100, 1: 200 }
console.log(sp.count, sp[0])Une solution plus claire
Lorsque les clés fixes et les clés dynamiques ont des types réellement indépendants, envisagez de les séparer : imbriquez la partie dynamique sous sa propre propriété. Vous éviterez ainsi d’imposer une union peu naturelle.
interface Better {
name: string
scores: { [key: string]: number }
}
const b: Better = { name: "ana", scores: { math: 90 } }
console.log(b.name, b.scores.math)Quand les combiner
Combinez les clés connues et dynamiques lorsque les propriétés fixes partagent naturellement le type de valeur des éléments supplémentaires — par exemple des compteurs avec un total, ou des paramètres d’un même type avec quelques indicateurs garantis. Sinon, l’imbrication permet de préserver la cohérence des types.
interface Tally {
total: number
[bucket: string]: number
}
const t: Tally = { total: 0, a: 3, b: 5 }
t.total = t.a + t.b
console.log(t.total) // 8Vérification rapide
Évaluez votre compréhension du mélange des clés fixes et dynamiques.
Récapitulatif
Vous pouvez déclarer ensemble des propriétés fixes et une signature d’index, mais le type de chaque propriété fixe doit pouvoir être affecté au type de valeur de la signature d’index. Élargissez la signature au moyen d’une union pour accepter différents types de propriétés fixes, et incluez undefined lorsque ces propriétés sont facultatives. Lorsque les types sont réellement indépendants, imbriquez plutôt la partie dynamique sous sa propre clé.
Questions Fréquemment Posées
La leçon « Combiner clés connues et dynamiques » est-elle gratuite ?
Oui — le texte complet de « Combiner clés connues et dynamiques » 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 « Combiner clés connues et dynamiques » ?
Mélanger en toute sécurité des propriétés fixes et des signatures d’index. 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 « Combiner clés connues et dynamiques » ?
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
- Définir des signatures d’index
- Signatures d’index de chaînes et de nombres
- Combiner clés connues et dynamiques
- Signatures d’index ou Record