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.