Inferring types with infer keyword in Typescript - Step-by-Step Execution

Concept Flow - Inferring types with infer keyword

Start with conditional type

↓

Check if type matches pattern with infer

Yes | No↓

Return fallback type

↓

Extract inferred type

↓

Use inferred type in result

The infer keyword extracts a type from a pattern inside a conditional type, allowing us to capture and reuse parts of a type.

Execution Sample

Typescript

type GetReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

// Example function type
type Fn = (x: number) => string;

// Infer return type
type Result = GetReturnType<Fn>;

This code extracts the return type of a function type using infer inside a conditional type.

Execution Table

Step	Action	Evaluation	Result
1	Check if Fn matches (...args: any[]) => infer R	Fn is (x: number) => string	Matches pattern, infer R = string
2	Extract inferred type R	R = string	R = string
3	Return inferred type R	Result = string	Result = string
4	If no match, return never	Not applicable here	N/A

💡 Type Fn matches the function pattern, so inferred type R is string and returned.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
T	Fn = (x: number) => string	Matches pattern	N/A	N/A
R	undefined	Inferred as string	string	string
Result	undefined	N/A	N/A	string

Key Moments - 3 Insights

Why do we use 'infer R' inside the conditional type?

Because 'infer R' lets TypeScript capture the return type part of the function type T, as shown in execution_table step 1 and 2.

What happens if the type T does not match the function pattern?

The conditional type returns 'never' as fallback, shown in execution_table step 4.

Is the inferred type 'R' available outside the conditional type?

No, 'R' only exists inside the conditional type scope to extract and return the type, as seen in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table, what is the inferred type 'R' after step 2?

A number

B string

C never

D unknown

💡 Hint

Check the 'Evaluation' and 'Result' columns in execution_table row 2.

At which step does the conditional type return 'never'?

A Step 1

B Step 3

C Step 4

D Step 2

💡 Hint

Look at the 'exit_note' and execution_table row 4.

If the function type changed to (x: number) => boolean, what would be the final Result type?

A boolean

B never

C string

D any

💡 Hint

Refer to how 'R' is inferred from the return type in execution_table step 1 and 2.

Concept Snapshot

Syntax: type NewType<T> = T extends Pattern<infer R> ? R : Fallback;

- 'infer' extracts a type part inside conditional types.
- Used to capture types like return types, argument types.
- If no match, fallback type is used.
- Helps create flexible, reusable type utilities.

Full Transcript

This visual trace shows how TypeScript's 'infer' keyword works inside conditional types. We start by checking if a type T matches a pattern that includes 'infer R'. If it matches, TypeScript extracts the type part as R. For example, given a function type, it extracts the return type. If it doesn't match, it returns a fallback type like 'never'. The execution table walks through these steps, showing how the inferred type R is captured and returned. The variable tracker shows how T, R, and the final Result change during the process. Key moments clarify why 'infer' is used, what happens if no match occurs, and the scope of the inferred type. The quiz tests understanding of these steps and outcomes. This helps beginners see how 'infer' extracts types dynamically in TypeScript.