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.