Keyof operator in Typescript - Step-by-Step Execution

Concept Flow - Keyof operator

Define Interface

↓

Apply keyof Operator

↓

Get Union of Keys

↓

Use Keys as Type

↓

Access Object Properties Safely

The keyof operator takes an object type and produces a union of its keys as string literal types.

Execution Sample

Typescript

interface Person {
  name: string;
  age: number;
}
type PersonKeys = keyof Person;
let key: PersonKeys = "name";

This code defines an interface Person, then uses keyof to get a union of its keys, and assigns a valid key to a variable.

Execution Table

Step	Action	Evaluation	Result
1	Define interface Person with keys 'name' and 'age'	Person = {name: string, age: number}	Interface created
2	Apply keyof Person	keyof Person	"name" | "age" (union type)
3	Declare variable key of type PersonKeys	key: "name" | "age"	Variable declared
4	Assign "name" to key	key = "name"	Valid assignment
5	Try assign "height" to key	key = "height"	Error: Type '"height"' is not assignable to type '"name" | "age"'

💡 Execution stops because "height" is not a valid key of Person, causing a type error.

Variable Tracker

Variable	Start	After Step 4	After Step 5
key	undefined	"name"	Error (invalid assignment)

Key Moments - 2 Insights

Why can't I assign a string like "height" to the variable key?

Because keyof Person only allows keys that exist in Person, which are "name" and "age" (see execution_table step 5). "height" is not part of that union type.

What does keyof actually produce?

It produces a union of string literal types representing the keys of the object type (see execution_table step 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the type of PersonKeys after step 2?

A number

B string

C "name" | "age"

D any

💡 Hint

Check the 'Evaluation' column in step 2 of the execution_table.

At which step does the assignment cause a type error?

A Step 5

B Step 4

C Step 3

D No error

💡 Hint

Look at the 'Result' column for step 5 in the execution_table.

If the interface Person had a key 'height', what would change in the execution_table?

A The variable key could not be assigned "name"

B The union type would include "height"

C The keyof operator would produce only "height"

D No change

💡 Hint

Refer to step 2 where keyof produces the union of keys.

Concept Snapshot

keyof operator syntax: keyof Type
Produces a union of string literal types representing keys of Type.
Used to get valid property names of an object type.
Helps ensure safe property access and type checking.
Example: type Keys = keyof Person; // "name" | "age"

Full Transcript

The keyof operator in TypeScript takes an object type and returns a union of its keys as string literal types. For example, given an interface Person with keys 'name' and 'age', applying keyof Person produces the union type "name" | "age". This union can be used as a type for variables to ensure they only hold valid keys of the object. Assigning a string not in the union, like "height", causes a type error. This helps catch mistakes early and makes code safer by restricting keys to those defined in the type.