Why Inferring types with infer keyword in Typescript? - Purpose & Use Cases

The Big Idea

Discover how a tiny keyword can save you hours of guessing and rewriting types!

The Scenario

Imagine you have a big box of mixed toys and you want to sort them by type manually every time you open the box.

You have to look at each toy, guess its type, and write down what it is before you can play with it.

The Problem

This manual sorting is slow and tiring.

You might make mistakes guessing the toy types, and every time you get new toys, you have to start over.

It’s easy to get confused and waste time.

The Solution

The infer keyword in TypeScript acts like a smart helper that looks inside your box and figures out the toy types automatically.

It saves you from guessing and writing extra code.

You get the exact type information without the hassle.

Before vs After

✗ Before

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

✓ After

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

What It Enables

It lets you extract and reuse types automatically, making your code smarter and easier to maintain.

Real Life Example

When you write a function that returns different shapes of data, infer helps you capture the exact return type so you can use it safely elsewhere without repeating yourself.

Key Takeaways

Manual type guessing is slow and error-prone.

infer automatically extracts types inside complex structures.

This makes your TypeScript code cleaner and more reliable.

Practice

1. What does the infer keyword do in TypeScript conditional types?

easy

A. It declares a new variable inside a function.

B. It allows TypeScript to guess and extract a type inside a conditional type.

C. It creates a new interface automatically.

D. It imports types from external modules.

Solution

1. Step 1: Understand the role of infer

   The infer keyword is used inside conditional types to let TypeScript guess a type variable from a given type.

2. Step 2: Identify what infer extracts

   It extracts parts of complex types, like the return type of a function or the element type of an array.

3. Final Answer:

   It allows TypeScript to guess and extract a type inside a conditional type. -> Option B

4. Quick Check:

   infer extracts types = A [OK]

Hint: Remember: infer extracts types inside conditional types [OK]

Common Mistakes:

• Thinking infer declares variables in functions
• Confusing infer with interface creation
• Assuming infer imports types

2. Which of the following is the correct syntax to infer the return type of a function type F using infer?

easy

A. type ReturnType<F> = F extends (...args: any[]) => infer R ? R : never;

B. type ReturnType<F> = infer R extends F ? R : never;

C. type ReturnType<F> = F extends infer R => any ? R : never;

D. type ReturnType<F> = F extends (...args: infer R) => any ? R : never;

Solution

1. Step 1: Analyze the conditional type structure

   The correct syntax uses F extends (...args: any[]) => infer R to extract the return type R.

2. Step 2: Check each option for correct infer usage

   type ReturnType<F> = F extends (...args: any[]) => infer R ? R : never; correctly places infer R after the arrow function parameters and before the return type.

3. Final Answer:

   type ReturnType<F> = F extends (...args: any[]) => infer R ? R : never; -> Option A

4. Quick Check:

   Correct infer syntax for return type = A [OK]

Hint: Look for infer R right after function args in extends [OK]

Common Mistakes:

• Placing infer outside the extends clause
• Using infer on the wrong part of the function type
• Confusing parameter inference with return type inference

3. Given the following code, what is the type of ElementType?

type ElementType<T> = T extends (infer U)[] ? U : T;
type Result = ElementType;

medium

A. string

B. unknown

C. never

D. string[]

Solution

1. Step 1: Understand the conditional type with infer

   The type checks if T extends an array of some type U. If yes, it extracts U.

2. Step 2: Apply the type to string[]

   Since string[] extends (infer U)[], U is string. So, ElementType<string[]> is string.

3. Final Answer:

   string -> Option A

4. Quick Check:

   Extracted element type = string [OK]

Hint: infer extracts array element type inside conditional [OK]

Common Mistakes:

• Confusing the whole array type with element type
• Assuming infer returns the original type
• Ignoring the conditional fallback

4. Identify the error in this type definition that tries to infer the argument type of a function:

type ArgType<T> = T extends (arg: infer A) => void ? A : never;
type Test = ArgType<() => number>;

medium

A. The conditional type should check for return type, not argument type.

B. The syntax of infer is incorrect; it should be outside the parentheses.

C. The function type has no arguments, so infer fails and returns never.

D. The type alias is missing a generic constraint.

Solution

1. Step 1: Analyze the function type used

   The function type () => number has no arguments.

2. Step 2: Understand infer behavior with no matching argument

   The conditional type tries to infer argument A, but since there is no argument, the condition fails and returns never.

3. Final Answer:

   The function type has no arguments, so infer fails and returns never. -> Option C

4. Quick Check:

   Infer fails with no matching argument = C [OK]

Hint: Check if function actually has arguments before inferring [OK]

Common Mistakes:

• Assuming infer always succeeds
• Misplacing infer keyword syntax
• Confusing argument and return type inference

5. You want to create a type Flatten<T> that extracts the element type from nested arrays using infer. For example, Flatten<number[][]> should be number[]. Which of the following correctly implements this?

hard

A. type Flatten<T> = T extends (infer U)[] ? U[] : T;

B. type Flatten<T> = T extends (infer U)[] ? Flatten : T;

C. type Flatten<T> = T extends any[] ? Flatten : T;

D. type Flatten<T> = T extends (infer U)[] ? U extends any[] ? Flatten<U> : U[] : T;

Solution

1. Step 1: Understand the goal of Flatten

   We want to recursively unwrap nested arrays until we reach a non-array element, then wrap it back as a single array.

2. Step 2: Analyze type Flatten<T> = T extends (infer U)[] ? U extends any[] ? Flatten<U> : U[] : T;'s recursive conditional

   type Flatten<T> = T extends (infer U)[] ? U extends any[] ? Flatten<U> : U[] : T; checks if T is an array of U. If U is itself an array, it recursively calls Flatten<U>. Otherwise, it returns U[]. This matches the requirement.

3. Final Answer:

   type Flatten<T> = T extends (infer U)[] ? U extends any[] ? Flatten<U> : U[] : T; -> Option D

4. Quick Check:

   Recursive infer for nested arrays = B [OK]

Hint: Use recursive conditional with infer to unwrap nested arrays [OK]

Common Mistakes:

• Not handling recursion for nested arrays
• Returning wrong type shape after unwrapping
• Misplacing infer or conditional checks