Why Generic constraints with extends in Typescript? - Purpose & Use Cases

The Big Idea

What if your code could catch mistakes before you even run it?

The Scenario

Imagine you want to write a function that works with different types of objects, but only those that have a specific property, like a name. Without any rules, you might accidentally pass objects that don't have that property, causing errors.

The Problem

Manually checking each object's properties every time is slow and easy to forget. It leads to bugs and crashes because the program tries to use properties that don't exist. This makes your code fragile and hard to maintain.

The Solution

Generic constraints with extends let you tell TypeScript to only accept types that have certain properties. This way, the compiler helps you catch mistakes early, making your code safer and easier to understand.

Before vs After

✗ Before

function printName(obj: any) {
  console.log(obj.name.toUpperCase());
}

✓ After

function printName<T extends { name: string }>(obj: T) {
  console.log(obj.name.toUpperCase());
}

What It Enables

This lets you write flexible functions that work with many types, while still keeping your code safe and error-free.

Real Life Example

For example, you can create a function that accepts any user or product object, as long as it has a name property, so you can display names without worrying about missing data.

Key Takeaways

Manual checks for properties are slow and error-prone.

extends constraints ensure only suitable types are used.

This makes your code safer, clearer, and more reusable.

Practice

1.

What does the extends keyword do in a TypeScript generic constraint?

easy

A. It limits the generic type to types that match a specific shape or interface.

B. It makes the generic type optional.

C. It allows the generic type to be any type without restriction.

D. It converts the generic type to a string.

Solution

1. Step 1: Understand the role of extends in generics

   The extends keyword in generics restricts the generic type to only those types that satisfy a certain condition, usually matching an interface or type shape.

2. Step 2: Compare with other options

   Options B, C, and D describe behaviors unrelated to extends in generics. It does not make types optional, allow any type, or convert types to strings.

3. Final Answer:

   It limits the generic type to types that match a specific shape or interface. -> Option A

4. Quick Check:

   Generic constraints = limit type shape [OK]

Hint: Remember: extends restricts generic types to certain shapes [OK]

Common Mistakes:

• Thinking extends makes a type optional
• Confusing extends with type conversion
• Assuming extends removes restrictions

2.

Which of the following is the correct syntax to constrain a generic type T to an object with a name property of type string?

function greet<T>(obj: T): string {
  return `Hello, ${obj.name}`;
}

easy

A. function greet<T>(obj: T extends { name: string }): string

B. function greet<T extends { name: string }>(obj: T): string

C. function greet<T = { name: string }>(obj: T): string

D. function greet<T>(obj: T & { name: string }): string

Solution

1. Step 1: Identify correct generic constraint syntax

   The correct way to constrain a generic type is using T extends { name: string } inside the angle brackets.

2. Step 2: Check other options for syntax errors

   function greet<T = { name: string }>(obj: T): string uses assignment (=) which is for default types, not constraints. function greet<T>(obj: T extends { name: string }): string misplaces extends outside the angle brackets. function greet<T>(obj: T & { name: string }): string uses intersection (&) in parameter type, which is valid but not a generic constraint.

3. Final Answer:

   function greet<T extends { name: string }>(obj: T): string -> Option B

4. Quick Check:

   Use extends inside <> for constraints [OK]

Hint: Use extends inside <> for constraints [OK]

Common Mistakes:

• Using = instead of extends for constraints
• Placing extends outside generic brackets
• Confusing intersection types with constraints

3.

What will be the output of this TypeScript code?

interface HasId { id: number; }
function getId<T extends HasId>(obj: T): number {
  return obj.id;
}
const item = { id: 42, name: 'Book' };
console.log(getId(item));

medium

A. Error: Type argument does not satisfy constraint

B. undefined

C. Error: Property 'id' does not exist

D. 42

Solution

1. Step 1: Check if item satisfies the constraint

   The interface HasId requires an id property of type number. The object item has id: 42, so it satisfies T extends HasId.

2. Step 2: Understand function behavior

   The function returns obj.id, so calling getId(item) returns 42.

3. Final Answer:

   42 -> Option D

4. Quick Check:

   Object matches constraint, returns id [OK]

Hint: Check if argument matches constraint to predict output [OK]

Common Mistakes:

• Assuming runtime error due to missing explicit type
• Confusing property existence with type errors
• Thinking generic constraints affect runtime output

4.

Identify the error in this TypeScript code and select the fix:

function printLength<T>(arg: T): number {
  return arg.length;
}

medium

A. Add constraint: <T extends { length: number }>

B. Change return type to void

C. Remove length property access

D. Use any instead of generic T

Solution

1. Step 1: Identify cause of error

   The generic type T has no guarantee to have a length property, so accessing arg.length causes a compile error.

2. Step 2: Fix by adding a constraint

   Adding T extends { length: number } ensures arg has a length property, fixing the error.

3. Final Answer:

   Add constraint: <T extends { length: number }> -> Option A

4. Quick Check:

   Constraint ensures property exists [OK]

Hint: Add extends constraint to guarantee properties exist [OK]

Common Mistakes:

• Ignoring missing property errors
• Changing return type instead of fixing constraint
• Using any defeats generic safety

5.

Given this interface and function, which call is valid and why?

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

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person: Person = { name: 'Alice', age: 30 };

Which call is valid?

hard

A. getProperty(person, 0)

B. getProperty(person, 'height')

C. getProperty(person, 'name')

D. getProperty(person, 'toString')

Solution

1. Step 1: Understand the generic constraints

   The function uses K extends keyof T, so the key must be a valid property name of T. For Person, valid keys are 'name' and 'age'.

2. Step 2: Evaluate each option

   getProperty(person, 'name') uses 'name', which is a valid key. getProperty(person, 'height') uses 'height', not in Person. getProperty(person, 0) uses 0, not a key. getProperty(person, 'toString') uses 'toString', which is a method on Object prototype, not a key of Person interface.

3. Final Answer:

   getProperty(person, 'name') -> Option C

4. Quick Check:

   Key must be keyof object type [OK]

Hint: Use keys from interface only with keyof constraint [OK]

Common Mistakes:

• Using keys not declared in interface
• Passing numbers instead of string keys
• Confusing prototype methods with interface keys