How TypeScript infers generic types - Practice Exercises

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with generics?

Consider this TypeScript function that uses a generic type. What will be the output when calling identity(42)?

Typescript

function identity<T>(arg: T): T {
  return arg;
}

console.log(identity(42));

A 42

B "42"

C undefined

D Type error at compile time

💡 Hint

TypeScript infers the generic type from the argument passed.

The generic type is inferred as number because 42 is a number. The function returns the same value, so output is 42.

❓ Predict Output

intermediate

What type does TypeScript infer here?

Given this function call, what type does TypeScript infer for T?

Typescript

function wrapInArray<T>(value: T): T[] {
  return [value];
}

const result = wrapInArray('hello');

A never[]

B string[]

C any[]

D number[]

💡 Hint

Look at the argument passed to the function.

The argument is a string, so T is inferred as string. The function returns an array of T, so result is string[].

❓ Predict Output

advanced

What is the output of this generic function with multiple parameters?

What will this code print when run?

Typescript

function merge<T, U>(obj1: T, obj2: U): T & U {
  return {...obj1, ...obj2};
}

const merged = merge({name: 'Alice'}, {age: 30});
console.log(merged);

A Type error: incompatible types

B { name: 'Alice' }

C { age: 30 }

D { name: 'Alice', age: 30 }

💡 Hint

The function combines two objects using spread syntax.

The function merges two objects into one. The result has properties from both inputs.

❓ Predict Output

advanced

What error does this code raise due to incorrect generic inference?

What error will this TypeScript code produce?

Typescript

function firstElement<T>(arr: T[]): T {
  return arr[0];
}

const result = firstElement([]);
console.log(result);

A Type error: Argument of type 'never[]' is not assignable to parameter of type 'T[]'.

B Error: Element implicitly has an 'any' type because type '[]' has no elements.

C undefined

D null

💡 Hint

TypeScript infers the empty array as never[], causing a type mismatch.

TypeScript treats the empty array literal as never[] in this generic context, which is not assignable to T[], resulting in a compile-time type error.

🧠 Conceptual

expert

Which option best describes how TypeScript infers generic types in this scenario?

Given a generic function with multiple parameters, how does TypeScript infer the generic types when called with different argument types?

A TypeScript requires explicit generic type annotations when multiple parameters have different types.

B TypeScript infers the generic types by using the first argument's type for all generic parameters.

C TypeScript infers each generic type parameter independently based on the corresponding argument's type.

D TypeScript cannot infer generic types if there are multiple parameters and throws a compile error.

💡 Hint

Think about how TypeScript matches each generic parameter to each argument.

TypeScript infers each generic type parameter separately from the corresponding argument's type, allowing flexible generic functions.

Practice

1. What does TypeScript do when you call a generic function without specifying the type explicitly?

easy

A. It ignores the generic and treats the function as non-generic.

B. It throws a compilation error asking for the type.

C. It guesses the generic type based on the arguments you pass.

D. It always uses the type any by default.

Solution

1. Step 1: Understand generic function calls

   When you call a generic function without specifying the type, TypeScript tries to figure out the type from the arguments you provide.

2. Step 2: Check TypeScript behavior

   TypeScript uses the argument types to infer the generic type automatically, so you don't have to write it explicitly.

3. Final Answer:

   It guesses the generic type based on the arguments you pass. -> Option C

4. Quick Check:

   Type inference = guessing type from arguments [OK]

Hint: Remember: TypeScript guesses generic types from arguments [OK]

Common Mistakes:

• Thinking TypeScript requires explicit generic types always
• Assuming it defaults to any type
• Believing generic types are ignored if not specified

2. Which of the following is the correct syntax to define a generic function in TypeScript that returns the same type it receives?

easy

A. function identity<T>(arg: T): T { return arg; }

B. function identity(arg: T): T { return arg; }

C. function identity<T>(arg): T { return arg; }

D. function identity<T>(arg: T): any { return arg; }

Solution

1. Step 1: Check generic function syntax

   The generic type parameter T must be declared before the function parameters inside angle brackets <T>.

2. Step 2: Verify parameter and return types

   The parameter arg should be typed as T, and the return type should also be T to return the same type.

3. Final Answer:

   function identity<T>(arg: T): T { return arg; } -> Option A

4. Quick Check:

   Generic syntax = <T> before parameters [OK]

Hint: Generic type <T> goes before parameters in function definition [OK]

Common Mistakes:

• Omitting <T> before parameters
• Not typing the argument as T
• Returning any instead of T

3. What will be the output of this TypeScript code?

function wrapInArray<T>(value: T) {
  return [value];
}

const result = wrapInArray(42);
console.log(typeof result[0]);

medium

A. "number"

B. "string"

C. "object"

D. "undefined"

Solution

1. Step 1: Identify the generic type inferred

   The function wrapInArray is called with 42, a number, so TypeScript infers T as number.

2. Step 2: Check the returned array and logged type

   The function returns an array containing the number 42. Accessing result[0] gives 42, so typeof result[0] is "number".

3. Final Answer:

   "number" -> Option A

4. Quick Check:

   typeof 42 = "number" [OK]

Hint: Generic type matches argument type, so typeof matches argument [OK]

Common Mistakes:

• Assuming the type is string by default
• Confusing array type with element type
• Expecting 'object' because of array

4. Consider this code snippet:

function firstElement<T>(arr: T[]): T {
  return arr[0];
}

const value = firstElement([true, false, true]);
console.log(value.toUpperCase());

What is the problem here?

medium

A. The array passed is empty, so arr[0] is undefined.

B. TypeScript cannot infer the generic type T.

C. The function firstElement returns an array instead of an element.

D. Calling toUpperCase() on a boolean causes a compile-time error.

Solution

1. Step 1: Analyze the inferred generic type

   The array [true, false, true] is of type boolean[], so T is inferred as boolean.

2. Step 2: Check the method call on the returned value

   The function returns a boolean, but toUpperCase() is a string method. Calling it on a boolean causes a compile-time error.

3. Final Answer:

   Calling toUpperCase() on a boolean causes a compile-time error. -> Option D

4. Quick Check:

   Boolean has no toUpperCase() method [OK]

Hint: Check if method matches the inferred type before calling [OK]

Common Mistakes:

• Thinking TypeScript inference failed
• Assuming function returns array instead of element
• Ignoring compile-time errors from wrong method calls

5. You want to write a generic function mergeObjects that takes two objects and returns a new object combining both. How does TypeScript infer the generic types when you call mergeObjects({name: "Alice"}, {age: 30})?

function mergeObjects(obj1: T, obj2: U): T & U {
  return {...obj1, ...obj2};
}

hard

A. TypeScript infers both T and U as object losing specific properties.

B. TypeScript infers T as {name: string} and U as {age: number}, returning their intersection type.

C. TypeScript cannot infer generic types for multiple parameters automatically.

D. TypeScript infers T and U as any by default.

Solution

1. Step 1: Identify argument types passed to the function

   The first argument is {name: "Alice"} which has type {name: string}. The second is {age: 30} with type {age: number}.

2. Step 2: Understand TypeScript's inference for multiple generics

   TypeScript infers T as the type of the first argument and U as the type of the second argument automatically.

3. Step 3: Check the return type

   The return type is the intersection T & U, meaning the combined object has both name and age properties.

4. Final Answer:

   TypeScript infers T as {name: string} and U as {age: number}, returning their intersection type. -> Option B

5. Quick Check:

   Multiple generics inferred from each argument [OK]

Hint: Each generic inferred from corresponding argument type [OK]

Common Mistakes:

• Assuming generic types default to object or any
• Thinking TypeScript can't infer multiple generics
• Confusing intersection type with union type