Why interfaces are needed in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an interface named Person.

Typescript

interface [1] {
  name: string;
  age: number;
}

Drag options to blanks, or click blank then click option'

AUser

BEmployee

CPerson

DData

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong interface name that doesn't match the context.

The interface name should be Person to match the declaration.

2fill in blank

medium

Complete the code to create a variable of type Person.

Typescript

const user: [1] = { name: 'Alice', age: 30 };

Drag options to blanks, or click blank then click option'

AObject

BUser

CEmployee

DPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using a type that does not match the interface name.

The variable user must be of type Person to match the interface.

3fill in blank

hard

Fix the error by completing the code to implement the interface correctly.

Typescript

class Employee implements [1] {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

Drag options to blanks, or click blank then click option'

APerson

BUser

CData

DEmployee

Attempts:

3 left

💡 Hint

Common Mistakes

Implementing a wrong interface name that does not match the properties.

The class Employee must implement the Person interface to ensure it has the required properties.

4fill in blank

hard

Fill both blanks to create an interface and use it to type a function parameter.

Typescript

interface [1] {
  title: string;
  completed: boolean;
}

function printTask(task: [2]) {
  console.log(`${task.title} is ${task.completed ? 'done' : 'not done'}`);
}

Drag options to blanks, or click blank then click option'

ATask

BJob

DWork

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for interface and parameter type.

The interface and the function parameter type must both be Task to match.

5fill in blank

hard

Fill all three blanks to create an interface, a variable, and a function using that interface.

Typescript

interface [1] {
  id: number;
  name: string;
}

const product: [2] = { id: 1, name: 'Book' };

function showProduct(p: [3]) {
  console.log(`Product: ${p.name} (ID: ${p.id})`);
}

Drag options to blanks, or click blank then click option'

AProduct

DItem

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for interface, variable, and function parameter.

All three blanks must be Product to keep the types consistent.

Practice

1. Why do we use interfaces in TypeScript?

easy

A. To replace functions with classes

B. To define the shape of objects and ensure consistent structure

C. To execute code faster at runtime

D. To store data permanently in a database

Solution

1. Step 1: Understand the purpose of interfaces

   Interfaces describe how an object should look, like a blueprint for data.

2. Step 2: Identify the correct use case

   They help keep code consistent by checking object structure during development.

3. Final Answer:

   To define the shape of objects and ensure consistent structure -> Option B

4. Quick Check:

   Interfaces = object shape consistency [OK]

Hint: Interfaces describe object shapes to avoid mistakes [OK]

Common Mistakes:

• Thinking interfaces affect runtime speed
• Confusing interfaces with database storage
• Using interfaces to replace functions

2. Which of the following is the correct syntax to declare an interface in TypeScript?

easy

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

B. class Person { name: string; age: number; }

C. type Person = { name: string; age: number; }

D. function Person(name: string, age: number) {}

Solution

1. Step 1: Recall interface declaration syntax

   Interfaces use the keyword interface followed by the name and curly braces.

2. Step 2: Compare options

   interface Person { name: string; age: number; } uses interface correctly; others use class, type alias, or function.

3. Final Answer:

   interface Person { name: string; age: number; } -> Option A

4. Quick Check:

   interface keyword + braces = correct syntax [OK]

Hint: Look for 'interface' keyword with curly braces [OK]

Common Mistakes:

• Confusing interface with class syntax
• Using type alias instead of interface
• Writing function instead of interface

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

interface User { id: number; name: string; }

const user: User = { id: 1, name: "Alice" };
console.log(user.name);

medium

A. undefined

B. 1

C. "Alice"

D. Error: Property 'name' does not exist

Solution

1. Step 1: Understand the interface and object

   The interface User requires id and name. The object matches this shape.

2. Step 2: Check the console.log statement

   It prints user.name, which is "Alice" as assigned.

3. Final Answer:

   "Alice" -> Option C

4. Quick Check:

   Accessing user.name prints "Alice" [OK]

Hint: Check object property values matching interface [OK]

Common Mistakes:

• Expecting id to print instead of name
• Thinking interface affects runtime output
• Assuming property is missing causing error

4. Identify the error in this TypeScript code using an interface:

interface Product { id: number; name: string; }

const product: Product = { id: 10 };

medium

A. Cannot assign object to interface type

B. Interface name should be lowercase

C. Extra property 'id' not allowed in Product

D. Missing property 'name' in object assigned to Product

Solution

1. Step 1: Check interface properties

   Product interface requires both id and name properties.

2. Step 2: Compare object properties

   The object only has id, missing name, causing a type error.

3. Final Answer:

   Missing property 'name' in object assigned to Product -> Option D

4. Quick Check:

   All interface properties must be present [OK]

Hint: Check all interface properties are in the object [OK]

Common Mistakes:

• Ignoring missing required properties
• Thinking interface names must be lowercase
• Believing extra properties cause errors

5. You want to create a function that accepts any object with a title string property and an optional description string property. Which interface best fits this need?

hard

A. interface Item { title: string; description?: string; }

B. interface Item { title?: string; description: string; }

C. interface Item { title: string; description: string; }

D. interface Item { title: string | number; description?: string; }

Solution

1. Step 1: Understand required and optional properties

   The function needs title as required string, description optional string.

2. Step 2: Analyze each interface option

   interface Item { title: string; description?: string; } matches exactly: title required, description optional. Others either make title optional or wrong type.

3. Final Answer:

   interface Item { title: string; description?: string; } -> Option A

4. Quick Check:

   Required title + optional description = interface Item { title: string; description?: string; } [OK]

Hint: Use '?' for optional properties in interfaces [OK]

Common Mistakes:

• Making required properties optional
• Using wrong types for properties
• Forgetting '?' for optional fields