Why interfaces are needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use interfaces in TypeScript?

Which of the following best explains why interfaces are needed in TypeScript?

A Interfaces replace classes and remove the need for functions.

B Interfaces allow you to write code that runs faster by optimizing JavaScript execution.

C Interfaces automatically generate user interfaces for web applications.

D Interfaces define a contract for objects, ensuring consistent structure and enabling type checking.

💡 Hint

Think about how interfaces help with organizing and checking data shapes.

Interfaces in TypeScript specify the shape of objects. They help catch errors early by checking that objects follow the expected structure.

❓ Predict Output

intermediate

Output of interface usage in TypeScript

What will be the output of the following TypeScript code when compiled and run?

Typescript

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  return `Hello, ${person.name}. You are ${person.age} years old.`;
}

const user = { name: "Alice", age: 30 };
console.log(greet(user));

A Hello, Alice. You are 30 years old.

B TypeError at runtime because user is missing properties.

C Compilation error: user does not implement Person interface.

D Hello, undefined. You are undefined years old.

💡 Hint

Interfaces are only for compile-time checks and do not affect runtime objects.

The object 'user' matches the interface shape, so the function runs and prints the greeting correctly.

🔧 Debug

advanced

Identify the error with interface implementation

What error will this TypeScript code produce?

Typescript

interface Vehicle {
  wheels: number;
  drive(): void;
}

const bike: Vehicle = {
  wheels: 2
};

A No error, code runs fine.

B Error: Property 'drive' is missing in type '{ wheels: number; }' but required in type 'Vehicle'.

C Error: 'wheels' property must be a string, not a number.

D Runtime error: drive is not a function.

💡 Hint

Check if all required properties and methods of the interface are present.

The object 'bike' is missing the 'drive' method required by the Vehicle interface, causing a compile-time error.

📝 Syntax

advanced

Correct interface syntax in TypeScript

Which option shows the correct syntax to declare an interface with a required string property 'title' and an optional number property 'year'?

A interface Book { title: string; year?: 'number'; }

B interface Book { title: string; optional year: number; }

C interface Book { title: string; year?: number; }

D interface Book { title: string; year: number | undefined; }

💡 Hint

Remember how optional properties are marked in TypeScript interfaces.

Option C correctly uses '?' to mark 'year' as optional. Other options have syntax errors or wrong types.

🚀 Application

expert

Using interfaces to enforce consistent function parameters

You want to create a function that accepts an object with properties 'x' and 'y' as numbers. Which interface and function definition ensure this and allow TypeScript to check the input?

A

interface Point { x: number; y: number; }
function printPoint(p: Point) { console.log(`X: ${p.x}, Y: ${p.y}`); }

B

interface Point { x: number; y: number; }
function printPoint(p: { x: string; y: string }) { console.log(`X: ${p.x}, Y: ${p.y}`); }

C

interface Point { x: number; y: number; }
function printPoint(p: any) { console.log(`X: ${p.x}, Y: ${p.y}`); }

D

interface Point { x: number; y: number; }
function printPoint(p: { x: number }) { console.log(`X: ${p.x}, Y: ${p.y}`); }

💡 Hint

Check that the function parameter type matches the interface exactly.

Option A uses the interface Point for the parameter, ensuring both 'x' and 'y' are numbers and present. Others have mismatched types or missing properties.