Antwoord.

De operators keyof en typeof zijn krachtige hulpmiddelen voor type-annotatie in TypeScript. Hun gecombineerde gebruik maakt het mogelijk om types on-the-fly te construeren, veilige functies te creëren en de structuur van objecten maximaal flexibel uit te drukken.

Probleemgeschiedenis

typeof in TypeScript wordt gebruikt om het type van een variabele af te leiden, terwijl keyof een union van alle sleutels van een object of type retourneert. Samen stellen ze ons in staat om met dynamisch gedefinieerde objecten te werken en onderling verbonden types te maken.

Probleem

Zonder deze operators moet je bij het werken met objecten, enums en overeenkomstentabellen vaak handmatig de sleutelstrings in types en waarden herhalen, wat leidt tot synchronisatieproblemen en het onderhouden van de code bemoeilijkt.

Oplossing

Met typeof krijg je het type van de waarde van de variabele, en met keyof bouw je de type-unie van al zijn sleutels op. Het resultaat is automatisering van type-annotatie.

Codevoorbeeld:

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

// Met typeof krijgen we het type, en met keyof — alle sleutels van het object

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

Belangrijkste kenmerken:

Helpt bij het bouwen van strikt verbonden key-value types zonder handmatige updates.
Maakt het mogelijk om functies te type-annoteren die met object sleutels werken.
Elimineert synchronisatieproblemen tussen sleutels en types.

Vragen met een valstrik.

Kunnen de waarden van een object, verkregen via typeof, automatisch sleutels in een unie-type worden?

Nee, typeof retourneert het type van de objectstructuur, niet van de waarden. Om een unie van waarden te krijgen, moet je apart de types van de waarden verkrijgen.

Wat retourneert typeof voor een enum en wat retourneert keyof typeof voor een enum?

Voor een enum retourneert typeof het type van het enum-object (in beide richtingen: key-value en value-key), terwijl keyof typeof een union van string/numerieke sleutels van dat object teruggeeft. Bijvoorbeeld:

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

Kan je met behulp van keyof typeof een type-veilige lijst van alle mogelijke parameters van een functie die object sleutels accepteert, verkrijgen?

Ja, op deze manier creëer je een functie die alleen geldige sleutels accepteert. Dit voorkomt fouten bij het werken met sleutels van objecten.

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

Typefouten en anti-patronen

Verkeerd vermoeden dat keyof typeof toepasbaar is op arraywaarden — voor een array zijn dit indices, niet waarden.
Onbegrip dat typeof werkt op type-niveau, niet een runtime-waarde retourneert.
Toepassing op een type dat niet expliciet is gedefinieerd, wat de type-afleiding beschadigt.

Voorbeeld uit het leven

Negatieve case

In een constante met API-statistieken worden de types van string sleutels handmatig gedefinieerd:

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

Voordelen:

Het is duidelijk welke strings geldig zijn.

Nadelen:

Handmatige wijzigingen van types zijn nodig bij het bijwerken van de lijst; synchronisatieproblemen en fouten.

Positieve case

Gebruik van keyof typeof voor automatische ondersteuning van de lijst:

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