Inferring types with infer keyword in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this inferred type?

Consider the following TypeScript type using infer. What is the type of Result?

Typescript

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

type Func = (x: number) => string;
type Result = ExtractReturnType<Func>;

// What is the type of Result?

A "never"

B "number"

C "any"

D "string"

💡 Hint

Look at what the infer R captures inside the function type.

The infer R keyword extracts the return type of the function type T. Since Func returns a string, Result is string.

❓ Predict Output

intermediate

What is the inferred type from a tuple?

Given this type using infer, what is the type of First?

Typescript

type FirstElement<T> = T extends [infer U, ...any[]] ? U : never;

type Tuple = [boolean, number, string];
type First = FirstElement<Tuple>;

// What is the type of First?

A "boolean"

B "number"

C "string"

D "never"

💡 Hint

The infer U captures the first element of the tuple.

The type FirstElement extracts the first element type from a tuple. Since Tuple starts with boolean, First is boolean.

🔧 Debug

advanced

Why does this infer type cause an error?

This code tries to infer the argument type of a function but causes a TypeScript error. What is the cause?

Typescript

type ArgType<T> = T extends (arg: infer A, arg2: infer B) => any ? A : never;

type Fn = (x: number, y: string) => void;
type Result = ArgType<Fn>;

// Why does this cause an error?

A Because the syntax for multiple infer variables in parameters is invalid

B Because the conditional type only returns the first inferred argument type, ignoring the second

C Because only one infer variable is allowed per conditional type

D Because the function type must have exactly one argument to use infer

💡 Hint

Check if multiple infer variables can be used in function parameters like this.

TypeScript does not allow multiple infer variables in a single function parameter list like this. The syntax is invalid and causes a syntax error.

❓ Predict Output

advanced

What is the inferred type from nested infer?

What is the type of InnerType after this nested inference?

Typescript

type NestedReturnType<T> = T extends () => () => infer R ? R : never;

type Fn = () => () => number;
type InnerType = NestedReturnType<Fn>;

// What is InnerType?

A "() => number"

B "void"

C "number"

D "never"

💡 Hint

Look carefully at the nested function return types and what infer captures.

The type NestedReturnType extracts the return type of the inner function. Since Fn returns a function that returns number, InnerType is number.

🧠 Conceptual

expert

Which option correctly infers the element type of an array?

You want to create a type that extracts the element type from an array type using infer. Which option correctly does this?

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

B type ElementType<T> = T extends Array<infer U> ? U : never;

C type ElementType<T> = T extends [infer U] ? U : never;

D type ElementType<T> = T extends { length: infer U } ? U : never;

💡 Hint

Remember how to match generic array types with infer.

Option B correctly uses Array<infer U> to extract the element type. Option B is invalid syntax. Option B only matches single-element tuples. Option B infers length, not element type.

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