Why generic interfaces matter in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of generic interface usage

What is the output of this TypeScript code using a generic interface?

Typescript

interface Box<T> {
  content: T;
}

const numberBox: Box<number> = { content: 123 };
const stringBox: Box<string> = { content: "hello" };

console.log(typeof numberBox.content, typeof stringBox.content);

A "number string"

B "number number"

C "object object"

D "string number"

💡 Hint

Think about the types of the content property in each box.

The numberBox.content is a number, so typeof returns "number". The stringBox.content is a string, so typeof returns "string". The console.log prints both separated by a space.

🧠 Conceptual

intermediate

Why use generic interfaces?

Why are generic interfaces important in TypeScript?

A They allow defining reusable interfaces that work with any data type, improving code flexibility.

B They enforce using only one specific data type in all interface instances.

C They automatically convert all data types to strings inside the interface.

D They prevent interfaces from being extended or reused.

💡 Hint

Think about how generics help avoid repeating similar interfaces for different types.

Generic interfaces let you write one interface that can handle many types, making your code more flexible and reusable.

🔧 Debug

advanced

Identify the error in generic interface usage

What error will this TypeScript code produce?

Typescript

interface Container<T> {
  value: T;
}

const c: Container = { value: 42 };

A No error, code runs fine.

B Error: Property 'value' is missing in type '{}'.

C Error: Type 'number' is not assignable to type 'string'.

D Error: Generic type 'Container<T>' requires 1 type argument(s).

💡 Hint

Check if the generic type parameter is provided when using the interface.

The interface Container requires a type argument like Container. Omitting it causes a TypeScript error.

📝 Syntax

advanced

Correct syntax for generic interface with multiple types

Which option correctly defines a generic interface with two type parameters?

A interface Pair<T U> { first: T; second: U; }

B interface Pair<T, U> { first: T; second: U; }

C interface Pair<T; U> { first: T; second: U; }

D interface Pair<T> U { first: T; second: U; }

💡 Hint

Remember how to separate multiple generic parameters in TypeScript.

Generic parameters must be separated by commas inside angle brackets. Option B is correct syntax.

🚀 Application

expert

Using generic interfaces to enforce type safety

Given this generic interface, what is the type of result after this code runs?

interface Response {
  data: T;
  error?: string;
}

function fetchData(input: T): Response {
  return { data: input };
}

const result = fetchData({ id: 1, name: "Alice" });

A { data: object; error?: string | undefined }

B { data: any; error?: string | undefined }

C { data: { id: number; name: string }; error?: string | undefined }

D { data: string; error?: string | undefined }

💡 Hint

Look at how the generic type T is inferred from the argument.

The generic type T is inferred as { id: number; name: string }. So result has data of that exact type.