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.