How TypeScript infers generic types - Visual Walkthrough

Concept Flow - How TypeScript infers generic types

Call generic function with argument

↓

TypeScript checks argument type

↓

Infer generic type from argument

↓

Use inferred type inside function

↓

Return or process value with inferred type

TypeScript looks at the argument you pass to a generic function and figures out the generic type automatically, so you don't have to specify it.

Execution Sample

Typescript

function identity<T>(arg: T): T {
  return arg;
}

const result = identity(42);

This code defines a generic function identity and calls it with a number; TypeScript infers T as number.

Execution Table

Step	Action	Input/Argument	Inferred Type T	Return Value
1	Call identity with 42	42	number
2	Infer generic type T from argument	42	number
3	Execute function body	arg = 42	number	42
4	Return value		number	42
5	Assign to result		number	42

💡 Function completes after returning the argument with inferred type number.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
arg	undefined	42	42	42
T	unknown	number	number	number
result	undefined	undefined	undefined	42

Key Moments - 3 Insights

Why don't we need to specify the type T when calling identity(42)?

Because TypeScript looks at the argument 42 and automatically infers that T is number, as shown in execution_table step 2.

What happens if we call identity with a string instead?

TypeScript will infer T as string, similar to how it inferred number for 42, following the same steps in the execution_table.

Can TypeScript infer generic types from multiple arguments?

Yes, TypeScript tries to infer the generic type from all arguments, but if it can't, you may need to specify the type explicitly.

Visual Quiz - 3 Questions

Look at the execution_table, what is the inferred type T at step 2 when calling identity(42)?

A string

B number

C any

D unknown

💡 Hint

Check the 'Inferred Type T' column at step 2 in the execution_table.

At which step does the function return the value 42?

A Step 4

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'Return Value' column in the execution_table.

If we call identity('hello'), how would the inferred type T change in the variable_tracker?

A T would be number

B T would be any

C T would be string

D T would be undefined

💡 Hint

Refer to how T changes from unknown to number in variable_tracker; it changes to the argument's type.

Concept Snapshot

Generic functions let you write reusable code.
TypeScript infers the generic type from the argument you pass.
You don't need to specify the type explicitly.
The inferred type is used inside the function.
Example: identity(42) infers T as number.

Full Transcript

This visual execution shows how TypeScript infers generic types when calling a generic function. When identity is called with 42, TypeScript looks at the argument and infers that the generic type T is number. The function then uses this inferred type to process and return the value. Variables like arg and result hold the value 42, and T is tracked as number. This automatic inference means you don't have to write the type explicitly, making code simpler and safer.