Réponse.

Les opérateurs keyof et typeof sont des outils puissants de typage en TypeScript. Leur utilisation conjointe permet de construire des types à la volée, de créer des fonctions sûres et d'exprimer la structure des objets de manière maximale.

Contexte de la question

typeof en TypeScript sert à déduire le type à partir d'une variable, tandis que keyof renvoie un union de toutes les clés d'un objet ou d'un type. En tandem, ils permettent de travailler avec des objets déclarés dynamiquement et de créer des types interconnectés.

Problème

Sans ces opérateurs, lors du travail avec des objets, des enums et des tables de correspondance, il est souvent nécessaire de répéter manuellement les chaînes de clés dans les types et les valeurs, ce qui entraîne des erreurs de désynchronisation et complique la maintenance du code.

Solution

Avec typeof, on obtient le type à partir de la valeur d'une variable, et avec keyof, on construit un type d'union de toutes ses clés. Le résultat est une automatisation du typage.

Exemple de code :

const ERRORS = {
  NOT_FOUND: 'Not found',
  UNAUTHORIZED: 'Unauthorized',
  SERVER_ERROR: 'Server error',
};

// Avec typeof, on obtient le type, et avec keyof — toutes les clés de l'objet

function getErrorMessage(code: keyof typeof ERRORS): string {
  return ERRORS[code];
}

Caractéristiques clés :

Permet de construire des types strictement liés key-value sans mise à jour manuelle.
Permet de typifier les fonctions qui travaillent avec les clés des objets.
Élimine les problèmes de désynchronisation entre les clés et les types.

Questions piégées.

Les valeurs d'un objet obtenues via typeof peuvent-elles automatiquement devenir des clés dans un type union ?

Non, typeof renvoie le type de la structure de l'objet, pas des valeurs. Pour obtenir une union de valeurs, il faut obtenir séparément les types des valeurs.

Que renverra typeof pour un enum et que renverra keyof typeof pour un enum ?

Pour un enum, typeof renvoie le type de l'objet enum (dans les deux directions : key-value et value-key), tandis que keyof typeof donne une union des clés string/number de cet objet. Par exemple :

enum Colors { Red = 'R', Blue = 'B' }
type ColorKeys = keyof typeof Colors; // 'Red' | 'Blue'

Peut-on utiliser keyof typeof pour obtenir une liste type-safe de tous les paramètres possibles d'une fonction qui accepte des clés d'objet ?

Oui, en procédant ainsi, vous créez une fonction acceptant uniquement les clés valables. Cela prévient les erreurs lors du travail avec les clés des objets.

const config = { mode: 'dark', lang: 'ru' };
type ConfigKeys = keyof typeof config; // 'mode' | 'lang'
function useConfig(key: ConfigKeys) {
  // ...
}

Erreurs typiques et anti-patterns

Attente erronée que keyof typeof soit applicable aux valeurs d'un tableau : pour un tableau, ce sont les indices, pas les valeurs.
Incompréhension que typeof fonctionne au niveau des types, et ne renvoie pas une valeur à l'exécution.
Application à un type non déclaré explicitement, ce qui casse la déduction des types.

Exemple de la vie réelle

Cas négatif

Dans une constante de statuts API, on spécifie manuellement les types des clés string :

type StatusCodes = 'OK' | 'FAIL' | 'PENDING';
function isKnownStatus(code: StatusCodes) { /* ... */ }

Avantages :

Il est clair de voir quelles chaînes sont valables.

Inconvénients :

Il est nécessaire de changer manuellement les types lors de la mise à jour de la liste ; désynchronisation et erreurs.

Cas positif

Utilisation de keyof typeof pour le support automatique de la liste :

const STATUS = { OK: 1, FAIL: 0, PENDING: 2 };
type StatusKeys = keyof typeof STATUS;
function checkStatus(key: StatusKeys) { /* ... */ }