Generic constraints with extends in Typescript - Step-by-Step Execution

Concept Flow - Generic constraints with extends

Define generic type T

↓

Add constraint: T extends SomeType

↓

Use T in function/class

↓

Call function with argument

↓

Check if argument matches constraint

↓

Run code

This flow shows how a generic type T is constrained to extend a specific type, ensuring only compatible types are used.

Execution Sample

Typescript

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

const person = { name: "Alice", age: 30 };
console.log(greet(person));

This code defines a generic function that only accepts objects with a 'name' property, then greets the person.

Execution Table

Step	Action	Evaluation	Result
1	Define interface HasName	HasName requires 'name' string	Interface ready
2	Define function greet with T extends HasName	T must have 'name' property	Function ready
3	Create object person	{ name: 'Alice', age: 30 }	Object created
4	Call greet(person)	Check if person fits T extends HasName	person has 'name', OK
5	Return greeting string	`Hello, Alice`	Output: Hello, Alice
6	Print output	Console logs greeting	Hello, Alice

💡 Function call succeeds because person matches constraint HasName

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
person	undefined	undefined	undefined	{ name: 'Alice', age: 30 }	{ name: 'Alice', age: 30 }	{ name: 'Alice', age: 30 }
greet return	undefined	undefined	undefined	undefined	`Hello, Alice`	`Hello, Alice`

Key Moments - 2 Insights

Why does greet(person) work even though person has an extra 'age' property?

Because the constraint only requires 'name' property. Extra properties do not cause errors as long as the required ones exist (see step 4 in execution_table).

What happens if we call greet with an object missing 'name'?

TypeScript will give a compile-time error because the object does not satisfy the constraint T extends HasName (not shown in execution_table but implied in flow).

Visual Quiz - 3 Questions

Look at the execution_table, what is the output at step 5?

A "Hello, Alice"

B "Hello, person"

C "Hello, undefined"

D Error

💡 Hint

Check the 'Result' column at step 5 in execution_table

At which step does TypeScript check if the argument matches the constraint?

A Step 2

B Step 4

C Step 3

D Step 6

💡 Hint

Look at the 'Action' and 'Evaluation' columns in execution_table for step 4

If the object passed to greet did not have a 'name' property, what would happen?

A The function would print 'Hello, undefined'

B The function would run but return an empty string

C TypeScript would give a compile-time error

D The function would ignore the missing property and run

💡 Hint

Refer to key_moments about constraint violations and TypeScript errors

Concept Snapshot

Generic constraints with extends:
- Use <T extends Type> to restrict T
- T must have all properties of Type
- Allows safe access to those properties
- Extra properties are allowed
- Compile-time error if constraint not met

Full Transcript

This example shows how to use generic constraints with extends in TypeScript. We define an interface HasName requiring a 'name' string property. Then we create a generic function greet that only accepts types extending HasName. When we call greet with an object having 'name' and 'age', it works because the object meets the constraint. The execution table traces each step: defining interface, function, creating object, calling function, checking constraint, returning greeting, and printing output. Key moments clarify why extra properties are allowed and what happens if the constraint is not met. The visual quiz tests understanding of output, constraint checking step, and error behavior. The snapshot summarizes the main points about generic constraints with extends.