Keyof operator in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of keyof with interface keys

What is the output of the following TypeScript code when compiled and run in a JavaScript environment?

Typescript

interface Person {
  name: string;
  age: number;
  location: string;
}

type PersonKeys = keyof Person;

const key: PersonKeys = "age";
console.log(key);

A "age"

B TypeError at runtime

C "location"

D "name"

💡 Hint

The keyof operator creates a union of the keys of the interface.

The type PersonKeys is a union of the keys "name" | "age" | "location". Assigning "age" is valid and console.log prints "age".

🧠 Conceptual

intermediate

Understanding keyof with type aliases

Given the type alias below, what is the type of Keys?

Typescript

type Colors = {
  red: string;
  green: string;
  blue: string;
};

type Keys = keyof Colors;

A "red" | "green" | "blue"

B string

C number

D never

💡 Hint

keyof creates a union of all keys in the type.

keyof Colors produces a union of the keys "red", "green", and "blue".

❓ Predict Output

advanced

Output of keyof with union types

What is the output of this TypeScript code snippet when compiled and run?

Typescript

type A = { a: number };
type B = { b: string };
type AB = A | B;

type Keys = keyof AB;

const key1: Keys = "a";
const key2: Keys = "b";
console.log(key1, key2);

A TypeError at runtime

B "a b"

C Compilation error: Type '"a"' is not assignable to type 'never'

D "a a"

💡 Hint

keyof on a union type produces the intersection of keys.

keyof (A | B) is (keyof A) & (keyof B) = "a" & "b" = never. Assigning "a" to never causes a compilation error.

🔧 Debug

advanced

Identify the error with keyof and index signature

What error does this TypeScript code produce?

Typescript

type Dictionary = {
  [key: string]: number;
};

type Keys = keyof Dictionary;

const key: Keys = 123;

A Type 'number' is not assignable to type 'never'

B Type 'number' is not assignable to type 'string | number'

C No error, code compiles fine

D Type 'number' is not assignable to type 'string'

💡 Hint

keyof on a string index signature produces 'string'.

keyof Dictionary where Dictionary = { [key: string]: number } is string. 123 has type number, which is not assignable to string.

📝 Syntax

expert

Which option causes a syntax error with keyof usage?

Which of the following TypeScript snippets will cause a syntax error?

A type T = keyof (number | string);

B type T = keyof;

C type T = keyof [number, string];

D type T = keyof {a: number, b: string};

💡 Hint

keyof expects an object type or union of object types, but more importantly, requires a type argument.

keyof number is invalid because number is a primitive type, not an object type. This causes a syntax error. keyof on unions of object types or object literals is valid. keyof on tuple types like [number, string] is valid and produces keys like '0' | '1' | 'length' | etc. But D has no type after keyof, syntax error.

Practice

1. What does the keyof operator do in TypeScript?

easy

A. It returns the values of an object as a union type.

B. It converts a type to a string literal type.

C. It creates a union type of all keys of an object type.

D. It extracts the type of a function's return value.

Solution

1. Step 1: Understand the purpose of keyof

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

2. Step 2: Compare options with definition

   Only "It creates a union type of all keys of an object type." correctly describes this behavior. The other options describe unrelated TypeScript features.

3. Final Answer:

   It creates a union type of all keys of an object type. -> Option C

4. Quick Check:

   keyof = union of keys [OK]

Hint: Remember: keyof lists keys, not values or types [OK]

Common Mistakes:

• Confusing keyof with getting values
• Thinking it returns runtime keys instead of types
• Mixing it up with return type extraction

2. Which of the following is the correct syntax to get keys of type Person using keyof?

easy

A. type Keys = Person.keyof;

B. type Keys = keyof(Person);

C. type Keys = keys<Person>;

D. type Keys = keyof Person;

Solution

1. Step 1: Recall correct keyof syntax

   The correct syntax is keyof TypeName without parentheses or dot notation.

2. Step 2: Evaluate each option

   type Keys = keyof Person; uses correct syntax. type Keys = keyof(Person); incorrectly uses parentheses. type Keys = keys<Person>; uses a non-existent keys keyword. type Keys = Person.keyof; uses invalid dot notation.

3. Final Answer:

   type Keys = keyof Person; -> Option D

4. Quick Check:

   Correct syntax = keyof Type [OK]

Hint: Use keyof TypeName without parentheses [OK]

Common Mistakes:

• Adding parentheses around the type
• Using dot notation like Type.keyof
• Confusing keyof with keys

3. Given the code:

type Car = { make: string; model: string; year: number };
type CarKeys = keyof Car;

let key: CarKeys = 'year';
console.log(key);

What is the output when this code runs?

medium

A. 'year'

B. 'make'

C. Error: Type 'string' is not assignable

D. undefined

Solution

1. Step 1: Understand keyof usage

   CarKeys is a union of keys: 'make' | 'model' | 'year'. The variable key is assigned the string 'year', which is valid.

2. Step 2: Check console output

   The console logs the value of key, which is 'year'. No errors occur.

3. Final Answer:

   'year' -> Option A

4. Quick Check:

   Assigned key = 'year' [OK]

Hint: Assign only keys from the union to avoid errors [OK]

Common Mistakes:

• Expecting runtime error for type assignment
• Confusing keys with values
• Thinking keyof returns values

4. Identify the error in this code:

type User = { id: number; name: string };
function getValue(obj: User, key: keyof User) {
  return obj.key;
}

medium

A. Using dot notation with variable key instead of bracket notation.

B. Missing return type annotation in function.

C. Incorrect type for parameter obj.

D. keyof User is not a valid type.

Solution

1. Step 1: Analyze property access in function

   The function tries to access obj.key. Since key is a variable, dot notation looks for a property literally named 'key'.

2. Step 2: Correct property access syntax

   To use a variable key, bracket notation obj[key] is required to access the dynamic property.

3. Final Answer:

   Using dot notation with variable key instead of bracket notation. -> Option A

4. Quick Check:

   Use obj[key] for dynamic keys [OK]

Hint: Use bracket notation for variable keys [OK]

Common Mistakes:

• Using dot notation with variable keys
• Ignoring TypeScript error messages
• Assuming keyof is invalid

5. How can you write a generic function that takes an object and a key of that object, then returns the value of that key safely using keyof? Choose the correct implementation.

hard

A. function getProp<T>(obj: T, key: keyof T): string { return obj[key]; }

B. function getProp(obj: T, key: K): T[K] { return obj[key]; }

C. function getProp<T>(obj: T, key: string): any { return obj.key; }

D. function getProp(obj: T, key: K): K { return obj[key]; }

Solution

1. Step 1: Understand generic constraints with keyof

   To ensure the key is valid for the object, the key type K must extend keyof T. This restricts keys to valid property names.

2. Step 2: Check return type and access

   The return type should be T[K], the type of the property at key K. Accessing obj[key] returns this value safely.

3. Step 3: Evaluate options

   function getProp(obj: T, key: K): T[K] { return obj[key]; } correctly uses generics and keyof. function getProp<T>(obj: T, key: string): any { return obj.key; } uses string key and dot notation, which is unsafe. function getProp<T>(obj: T, key: keyof T): string { return obj[key]; } fixes key type but wrongly fixes return type to string. function getProp(obj: T, key: K): K { return obj[key]; } lacks constraint on K and returns wrong type.

4. Final Answer:

   function getProp<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; } -> Option B

5. Quick Check:

   Generic key constrained by keyof = safe access [OK]

Hint: Use K extends keyof T and return T[K] [OK]

Common Mistakes:

• Not constraining key type with keyof
• Using string keys without type safety
• Returning wrong or fixed types