Keyof operator in Typescript - Mini Project: Build & Apply

Using the Keyof Operator in TypeScript

📖 Scenario: You are working on a simple contact management app. You have a contact object with details like name, email, and phone number.You want to create a function that can get the value of any property of the contact by using the property name safely.

🎯 Goal: Build a TypeScript program that uses the keyof operator to restrict the property names you can use to get values from a contact object.

📋 What You'll Learn

Create a contact object with exact properties: name, email, and phone with given values

Create a type alias ContactKeys using the keyof operator on the contact object type

Write a function getContactValue that takes the contact object and a key of type ContactKeys and returns the value of that key

Call getContactValue with the contact object and the key 'email' and print the result

💡 Why This Matters

🌍 Real World

Using the <code>keyof</code> operator helps you write safer code when working with objects, avoiding mistakes like typos in property names.

💼 Career

Many TypeScript jobs require understanding how to use advanced types like <code>keyof</code> to build reliable and maintainable codebases.

1

Create the contact object

Create a constant object called contact with these exact properties and values: name set to 'Alice', email set to '[e-mail]', and phone set to '123-456-7890'.

Typescript

# Create the contact object with name, email, and phone
// Your code here

Hint

Use const contact = { name: 'Alice', email: '[e-mail]', phone: '123-456-7890' }.

2

Create a type alias using keyof

Create a type alias called ContactKeys that uses the keyof operator on the type of contact.

Typescript

const contact = {
  name: 'Alice',
  email: '[e-mail]',
  phone: '123-456-7890'
};

// Create type alias ContactKeys using keyof on contact
// Your code here

Hint

Use type ContactKeys = keyof typeof contact; to get keys of the contact object.

3

Write a function to get contact values by key

Write a function called getContactValue that takes two parameters: obj of the same type as contact, and key of type ContactKeys. The function should return the value of obj[key].

Typescript

const contact = {
  name: 'Alice',
  email: '[e-mail]',
  phone: '123-456-7890'
};

type ContactKeys = keyof typeof contact;

// Write function getContactValue(obj, key) that returns obj[key]
// Your code here

Hint

Define function getContactValue(obj: typeof contact, key: ContactKeys) { return obj[key]; }.

4

Call the function and print the email

Call getContactValue with contact and the key 'email'. Print the result using console.log.

Typescript

const contact = {
  name: 'Alice',
  email: '[e-mail]',
  phone: '123-456-7890'
};

type ContactKeys = keyof typeof contact;

function getContactValue(obj: typeof contact, key: ContactKeys) {
  return obj[key];
}

// Call getContactValue with contact and 'email' and print the result
// Your code here

Hint

Use console.log(getContactValue(contact, 'email')); to print the email.

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