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.