Generic conditional constraints in Typescript - Step-by-Step Execution

Concept Flow - Generic conditional constraints

Define generic type T

↓

Add constraint: T extends U

↓

Use T in function/class

↓

Call function with type argument

↓

Check if argument matches constraint

↓

Run code

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

Execution Sample

Typescript

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

const result = echoLength('hello');

This function takes a generic argument with a length property and returns its length.

Execution Table

Step	Action	Type of T	Argument	Check Constraint	Result
1	Call echoLength with 'hello'	string	'hello'	string has length property? Yes	Returns 5
2	Call echoLength with 123	number	123	number has length property? No	Error: Type 'number' does not satisfy constraint
3	Call echoLength with [1,2,3]	number[]	[1,2,3]	Array has length property? Yes	Returns 3

💡 Execution stops on error if argument type does not satisfy the constraint.

Variable Tracker

Variable	Start	After Call 1	After Call 2	After Call 3
T	undefined	string	number (error)	number[]
arg	undefined	'hello'	123 (error)	[1,2,3]
result	undefined	5	error	3

Key Moments - 2 Insights

Why does calling echoLength(123) cause an error?

Because 123 is a number and does not have a length property, it does not satisfy the constraint T extends { length: number }, as shown in execution_table row 2.

Can arrays be used as arguments for echoLength?

Yes, arrays have a length property, so they satisfy the constraint. This is shown in execution_table row 3 where the array [1,2,3] returns length 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result when echoLength is called with 'hello'?

A 5

B Error

C undefined

D 0

💡 Hint

Check execution_table row 1 under the Result column.

At which step does the type constraint cause an error?

A Step 1

B Step 2

C Step 3

D No error occurs

💡 Hint

See execution_table row 2 where the argument 123 fails the constraint.

If we pass an object { length: 10 } to echoLength, what would happen?

A Error because object is not string

B Returns undefined

C Returns 10 because object has length property

D TypeScript will not compile

💡 Hint

Refer to the constraint T extends { length: number } and how it accepts any type with length property.

Concept Snapshot

Generic conditional constraints syntax:
function fn<T extends U>(arg: T) { ... }

- T must satisfy constraint U
- Ensures type safety by restricting T
- Allows using properties of U on T
- Errors if argument type does not extend U

Full Transcript

This example shows how TypeScript uses generic conditional constraints to restrict a generic type T to only those types that have a length property. The function echoLength takes an argument of type T, which must extend an object with a length number property. When called with a string or array, it returns the length. When called with a number, it causes a compile-time error because number does not have length. This ensures safe use of the length property inside the function.