TypeScript Academy · Leçon

Combiner typeof et keyof

Déduire des types précis en enchaînant des opérateurs de type.

Combiner typeof et keyof 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.

La combinaison puissante

Individuellement, typeof dérive un type à partir d’une valeur et keyof répertorie les clés d’un type. Ensemble — keyof typeof value — ils produisent une union des clés réelles d’une valeur, ce qui permet un accès entièrement sécurisé par les types.

keyof typeof en action

Commencez par un objet const, capturez son type avec typeof, puis répertoriez ses clés avec keyof. Le résultat est une union des noms littéraux des clés de l’objet.

const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])

Pourquoi ce schéma existe

Vous disposez souvent d’un objet à l’exécution, mais d’aucune interface distincte. keyof typeof vous fournit un type de clé sans dupliquer la structure de l’objet dans un type écrit manuellement.

const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2

Accès à une clé sécurisé par les types

Un paramètre de fonction typé comme keyof typeof obj rejette les clés invalides lors de la compilation, de sorte que l’accès indexé à l’intérieur de la fonction est garanti sûr.

const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
  return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key

Objets constants semblables à des énumérations

Une pratique courante consiste à définir un objet as const comme pseudo-énumération, puis à en dériver ses types de clés et de valeurs.

const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)

Clés et valeurs

Remarquez la distinction : keyof typeof obj fournit les noms des clés, tandis que typeof obj[keyof typeof obj] fournit les types des valeurs. Choisissez celui dont votre API a besoin.

const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)

Accesseur générique getProperty

L’accesseur classique sécurisé par les types contraint un paramètre de clé avec K extends keyof T et renvoie T[K], de sorte que le type du résultat correspond exactement à celui de la propriété recherchée.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)

Le type de retour suit la clé

Comme le retour est de type T[K], le type du résultat de chaque appel s’adapte à la clé précise fournie : un nombre pour une clé, une chaîne pour une autre.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id")     // number
const nm = getProperty(u, "name")   // string
console.log(id, nm)

Les clés invalides sont rejetées

Passer une clé qui n’existe pas sur l’objet provoque une erreur de compilation. La contrainte générique l’impose avant même l’exécution du code.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))

Un mutateur sécurisé par les types

Le même mécanisme permet de créer un mutateur : le paramètre de valeur est de type T[K], vous ne pouvez donc affecter à cette clé qu’une valeur du type approprié.

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)

Mise en pratique

Le schéma keyof typeof, associé à l’accès générique T[K], vous fournit des utilitaires sûrs et réutilisables pour de vrais objets — la base des lecteurs de configuration typés, des recherches et des assistants de formulaires.

const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
  return theme[name]
}
console.log(color("danger")) // #f00

Vérification rapide

Testez votre compréhension de la combinaison de typeof et de keyof.

Récapitulatif

keyof typeof value dérive une union des clés réelles d’une valeur sans écrire d’interface distincte, ce qui rend l’accès indexé sûr. Distinguez les types de clés (keyof typeof obj) des types de valeurs (typeof obj[keyof typeof obj]). Le schéma générique getProperty<T, K extends keyof T>(obj, key): T[K] renvoie exactement le type recherché et rejette les clés invalides lors de la compilation.

Questions Fréquemment Posées

La leçon « Combiner typeof et keyof » est-elle gratuite ?

Oui — le texte complet de « Combiner typeof et keyof » 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 typeof et keyof » ?

Déduire des types précis en enchaînant des opérateurs de type. 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 « Combiner typeof et keyof » ?

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

← Retour à TypeScript Academy