Inferring types with infer keyword in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to infer the type of the first element in a tuple.

Typescript

type First<T extends any[]> = T extends [[1], ...any[]] ? [1] : never;

Drag options to blanks, or click blank then click option'

Ainfer R

Binfer T

Cinfer U

Dinfer V

Attempts:

3 left

💡 Hint

Common Mistakes

Using a concrete type instead of infer.

Not using the spread operator ...any[] to match the rest of the tuple.

The infer keyword is used to declare a type variable U that captures the first element's type in the tuple T.

2fill in blank

medium

Complete the code to infer the return type of a function type.

Typescript

type ReturnType<T> = T extends (...args: any[]) => [1] ? [1] : never;

Drag options to blanks, or click blank then click option'

Ainfer R

Bvoid

Cany

Dunknown

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed type like void instead of infer.

Not matching the function signature correctly.

The infer R captures the return type of the function T.

3fill in blank

hard

Fix the error in the code to infer the element type of an array type.

Typescript

type ElementType<T> = T extends Array<[1]> ? [1] : never;

Drag options to blanks, or click blank then click option'

AE

Binfer E

Cinfer T

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plain type variable without infer.

Using any which loses type information.

infer E is needed to capture the element type inside the array type T.

4fill in blank

hard

Fill both blanks to infer the argument types of a function type as a tuple.

Typescript

type Args<T> = T extends (...args: [1]) => any ? [2] : never;

Drag options to blanks, or click blank then click option'

Ainfer A

Bany[]

Cinfer R

Dunknown[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed type like any[] instead of infer.

Using different type variables in the two blanks.

infer A captures the tuple of argument types from the function type T.

5fill in blank

hard

Fill all three blanks to infer the resolved type from a Promise type.

Typescript

type UnwrapPromise<T> = T extends Promise<[1]> ? [1] : T extends Promise<[2]> ? [3] : T;

Drag options to blanks, or click blank then click option'

Ainfer U

Bany

CU

Dunknown

Attempts:

3 left

💡 Hint

Common Mistakes

Using different type variables for the two Promise checks.

Not using infer to capture the inner type.

The first infer U captures the type inside the Promise. Then U is used to return the resolved 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