Why generics are needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using generics?

Look at this function that uses a generic type T. What will it print?

Typescript

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

console.log(identity<string>("hello"));

A TypeError at runtime

B null

C undefined

D "hello"

💡 Hint

Generics let the function keep the type of the input and output the same.

The function identity returns exactly what it receives. Using <string> tells TypeScript the input is a string, so it returns "hello".

🧠 Conceptual

intermediate

Why use generics instead of 'any' in TypeScript?

Choose the best reason why generics are better than using any type.

A Generics make the code run faster at runtime.

B Generics keep type information, so errors can be caught before running the code.

C Generics allow using variables without declaring them.

D Generics automatically convert types to strings.

💡 Hint

Think about how TypeScript helps catch mistakes before the program runs.

Using any disables type checking, but generics keep the type info so TypeScript can warn about mistakes early.

❓ Predict Output

advanced

What is the output of this generic function with arrays?

What will this code print?

Typescript

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

console.log(firstElement([10, 20, 30]));
console.log(firstElement(['a', 'b', 'c']));

A

undefined
undefined

B

[10, 20, 30]
['a', 'b', 'c']

C

10
a

D TypeError at runtime

💡 Hint

The function returns the first item of the array.

The function firstElement returns the first element of the array passed in. For numbers, it returns 10; for strings, it returns 'a'.

🔧 Debug

advanced

What error does this code produce and why?

Look at this code. What error will it cause?

Typescript

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

const result = wrapInArray(5);
console.log(result);

A Type 'number' is not assignable to type 'number[]'.

B No error, prints [5].

C Runtime error: undefined is not iterable.

D SyntaxError: missing return statement.

💡 Hint

The function promises to return an array but returns a single value.

The function signature says it returns an array of T, but it returns value directly, which is just T. TypeScript reports a type mismatch.

🧠 Conceptual

expert

Why are generics important for reusable components in TypeScript?

Pick the best explanation for why generics help when building reusable components.

A Generics allow components to work with many types while keeping type safety and avoiding code duplication.

B Generics force all components to use the same type everywhere.

C Generics automatically generate UI elements without coding.

D Generics make components run faster by compiling to machine code.

💡 Hint

Think about how you can write one component that works with different data types safely.

Generics let you write flexible components that accept different types without losing the benefits of type checking, so you don't have to write the same code many times.

Practice

1. Why do we use generics in TypeScript?
function identity<T>(arg: T): T { return arg; }

easy

A. To make code run faster by skipping type checks

B. To force all variables to be of type string

C. To write functions that work with any data type while keeping type safety

D. To avoid using functions altogether

Solution

1. Step 1: Understand the generic function syntax

   The function identity uses <T> to accept any type and return the same type.

2. Step 2: Recognize the benefit of generics

   This allows the function to work with any type while keeping type safety, preventing errors.

3. Final Answer:

   To write functions that work with any data type while keeping type safety -> Option C

4. Quick Check:

   Generics = reusable + type safe functions [OK]

Hint: Generics = flexible + safe code for many types [OK]

Common Mistakes:

• Thinking generics make code faster
• Believing generics force string types
• Confusing generics with avoiding functions

2. Which of the following is the correct syntax to declare a generic function in TypeScript?

easy

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

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

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

D. function example<T>(arg: T) { return arg;

Solution

1. Step 1: Check generic declaration and usage

   function example<T>(arg: T): T { return arg; } correctly declares <T> and uses arg: T with return type T.

2. Step 2: Identify syntax errors in other options

   function example(arg: T): T { return arg; } misses generic declaration. function example<T>(arg): T { return arg; } misses type for arg. function example<T>(arg: T) { return arg; } misses return type.

3. Final Answer:

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

4. Quick Check:

   Generic syntax requires <T> and typed parameters [OK]

Hint: Generic syntax: function name<T>(arg: T): T [OK]

Common Mistakes:

• Omitting <T> after function name
• Not typing function parameters
• Forgetting return type annotation

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

function wrapInArray<T>(value: T): T[] { return [value]; }
const result = wrapInArray(5);
console.log(result);

medium

A. 5

B. [5]

C. Error: Type mismatch

D. ["5"]

Solution

1. Step 1: Understand the generic function behavior

   The function takes a value of any type and returns an array containing that value.

2. Step 2: Apply the function to the number 5

   Calling wrapInArray(5) returns an array with one element: 5.

3. Final Answer:

   [5] -> Option B

4. Quick Check:

   wrapInArray(5) = [5] [OK]

Hint: Generic function returns array with input value [OK]

Common Mistakes:

• Expecting single value instead of array
• Confusing number 5 with string "5"
• Thinking it causes a type error

4. Identify the error in this generic function and fix it:

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

medium

A. Parameter should be an array type: arr: T[]

B. Return type should be T[]

C. Function should not use generics here

D. Use arr.get(0) instead of arr[0]

Solution

1. Step 1: Analyze parameter type

   The parameter arr is typed as T, but it should be an array of T to use arr[0].

2. Step 2: Correct the parameter type

   Change arr: T to arr: T[] so the function accepts an array.

3. Final Answer:

   Parameter should be an array type: arr: T[] -> Option A

4. Quick Check:

   Array parameter needs T[] type [OK]

Hint: Array parameters need T[] type, not T [OK]

Common Mistakes:

• Using T instead of T[] for arrays
• Changing return type incorrectly
• Trying to use non-array methods on arrays

5. You want to create a generic function that accepts an array of any type and returns an object mapping each element to its index. Which is the correct implementation?

hard

A. function mapToIndex<T>(arr: T[]): T[] {
return arr.map((item, index) => index);
}

B. function mapToIndex<T>(arr: T): { [key: string]: number } {
const result = {};
arr.forEach((item, index) => { result[item] = index; });
return result;
}

C. function mapToIndex(arr: any[]): any {
const result = {};
arr.forEach((item, index) => { result[item] = index; });
return result;
}

D. function mapToIndex<T>(arr: T[]): { [key: string]: number } {
const result: { [key: string]: number } = {};
arr.forEach((item, index) => { result[String(item)] = index; });
return result;
}

Solution

1. Step 1: Check parameter and return types

   The function should accept an array of type T[] and return an object mapping strings to numbers.

2. Step 2: Verify implementation details

   function mapToIndex<T>(arr: T[]): { [key: string]: number } { const result: { [key: string]: number } = {}; arr.forEach((item, index) => { result[String(item)] = index; }); return result; } converts each item to string as key and assigns its index as value, correctly building the object.

3. Step 3: Identify errors in other options

   function mapToIndex<T>(arr: T): { [key: string]: number } { const result = {}; arr.forEach((item, index) => { result[item] = index; }); return result; } uses arr: T which is incorrect for arrays. function mapToIndex(arr: any[]): any { const result = {}; arr.forEach((item, index) => { result[item] = index; }); return result; } uses any losing type safety. function mapToIndex<T>(arr: T[]): T[] { return arr.map((item, index) => index); } returns an array of indexes, not the mapping object.

4. Final Answer:

   function mapToIndex<T>(arr: T[]): { [key: string]: number } { const result: { [key: string]: number } = {}; arr.forEach((item, index) => { result[String(item)] = index; }); return result; } -> Option D

5. Quick Check:

   Generic array input + object output with string keys [OK]

Hint: Use T[] for arrays and map keys as strings [OK]

Common Mistakes:

• Using T instead of T[] for array parameter
• Returning wrong type (array instead of object)
• Not converting keys to string