TypeScript Academy · Leçon

L’opérateur de type keyof

Obtenir avec keyof une union des clés d’un type d’objet.

L’opérateur de type keyof 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.

Les clés d’un type

L’opérateur keyof prend un type objet et produit une union de ses clés de propriété. Il constitue la base de l’accès aux propriétés sécurisé par le typage et des utilitaires génériques pour les clés.

keyof de base

Appliquez keyof à une interface pour obtenir une union des noms de ses clés sous forme de types littéraux de chaînes.

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

Seules les clés valides sont autorisées

Une variable typée comme keyof T ne peut contenir qu’une des clés réelles de T. Les fautes de frappe et les clés invalides sont détectées à la compilation.

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

keyof avec typeof

Combinez-les avec typeof pour obtenir les clés du type inféré d’une valeur. Ici, nous obtenons les clés d’un objet config sans écrire d’interface.

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

keyof d’une signature d’index de chaîne

Pour un type doté d’une signature d’index de chaîne, keyof vaut string | number, car toute clé de chaîne est autorisée et les clés numériques sont converties en chaînes.

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

keyof d’une signature d’index numérique

Pour une signature d’index numérique, keyof vaut simplement number. Cela correspond à la manière dont les tableaux exposent leurs indices numériques.

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

keyof d’un type tableau

Appliquer keyof à un type tableau produit une union surprenante : les indices numériques ainsi que tous les noms de méthodes et de propriétés du tableau, comme length et push.

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

Parcourir les clés en toute sécurité

Utilisez keyof pour écrire des boucles qui ne touchent qu’à des clés valides. Convertir Object.keys en (keyof T)[] garantit la sécurité du typage lors de l’accès indexé.

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

keyof dans les contraintes génériques

Un paramètre de clé générique est généralement contraint avec K extends keyof T. Cela garantit que la clé existe bien sur l’objet.

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

Combiner plusieurs clés

Comme keyof T est une union, vous pouvez l’intersecter ou la filtrer. Ici, une fonction accepte un tableau de clés valides.

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

Pourquoi keyof est important

keyof transforme les noms de propriétés en un type vérifiable, ce qui permet de créer des accesseurs, des mutateurs et des fonctions de mappage génériques qui ne peuvent pas référencer une clé inexistante. Il est omniprésent dans TypeScript avancé.

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

Vérification rapide

Testez votre compréhension de l’opérateur keyof.

Récapitulatif

keyof T produit une union des clés de propriété de T sous forme de types littéraux, ce qui limite les variables aux clés valides. Il renvoie string | number pour les signatures d’index de chaîne et number pour les signatures d’index numérique. Associé à typeof, il dérive les clés à partir des valeurs ; associé aux génériques (K extends keyof T), il permet de créer des accesseurs, des sélecteurs et des parcours sécurisés par le typage.

Questions Fréquemment Posées

La leçon « L’opérateur de type keyof » est-elle gratuite ?

Oui — le texte complet de « L’opérateur de type 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 « L’opérateur de type keyof » ?

Obtenir avec keyof une union des clés d’un type d’objet. 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 « L’opérateur de type 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