Keyof operator in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a type that represents the keys of the Person interface.

Typescript

interface Person { name: string; age: number; }
type PersonKeys = [1] Person;

Drag options to blanks, or click blank then click option'

Akey

Bkeys

Ckeyof

Dtypeof

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'typeof' instead of 'keyof' which gets the type of a variable, not keys.

Using 'keys' which is not a valid TypeScript operator.

The keyof operator creates a union type of the keys of the given type. Here, it extracts 'name' | 'age' from Person.

2fill in blank

medium

Complete the function signature to accept only keys of the User type.

Typescript

type User = { id: number; username: string; };
function getUserProperty(user: User, key: [1] User) {
  return user[key];
}

Drag options to blanks, or click blank then click option'

Anumber

Bkeyof

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' which allows any string, not just keys of User.

Using 'any' which disables type checking.

The parameter key should be restricted to keys of User using keyof User.

3fill in blank

hard

Fix the error in the code by completing the type for the keys parameter.

Typescript

interface Product { name: string; price: number; }
function getProperty(obj: Product, keys: [1] Product) {
  return obj[keys];
}

Drag options to blanks, or click blank then click option'

Akeyof

Bstring

Cnumber

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Typing keys as 'string' which is too broad and causes errors.

Using 'any' which disables type safety.

The parameter keys must be typed as keyof Product to ensure it matches one of the property names.

4fill in blank

hard

Fill both blanks to create a function that returns the value of a given key from an object.

Typescript

function getValue<T, K extends [1] T>(obj: T, key: K): T[[2]] {
  return obj[key];
}

Drag options to blanks, or click blank then click option'

Akeyof

Bstring

CK

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' instead of 'keyof' for the constraint.

Using 'string' or 'number' instead of the generic key type for indexing.

The generic type K extends keyof T to ensure it is a key of T. The return type is T[K], the type of the property.

5fill in blank

hard

Fill all three blanks to define a generic function that safely gets a property value by key.

Typescript

function safeGet<T, K extends [1] T>(obj: T, key: K): T[[2]] {
  if (key in obj) {
    return obj[[3]];
  }
  throw new Error('Key not found');
}

Drag options to blanks, or click blank then click option'

Akeyof

BK

Ckey

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' instead of 'keyof' for the constraint.

Using 'string' instead of the generic key type for indexing.

Using a wrong variable name instead of 'key' inside the function.

The generic K extends keyof T. The return type is T[K]. Inside the function, we use the parameter key to access the property.

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