Extending interfaces in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an interface named Person with a name property of type string.

Typescript

interface Person {
  name: [1];
}

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

Aboolean

Bnumber

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean instead of string for text properties.

The name property should be of type string to represent text.

2fill in blank

medium

Complete the code to extend the Person interface with a new interface Employee that adds an employeeId property of type number.

Typescript

interface Employee extends [1] {
  employeeId: number;
}

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

APerson

BStaff

CUser

DEmployee

Attempts:

3 left

💡 Hint

Common Mistakes

Extending an unrelated or undefined interface name.

The Employee interface extends Person to inherit its properties.

3fill in blank

hard

Fix the error in the interface extension syntax to correctly extend Person.

Typescript

interface Manager [1] Person {
  department: string;
}

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

Aimplements

Bextends

C:

Dinherits

Attempts:

3 left

💡 Hint

Common Mistakes

Using implements or other incorrect keywords for interface extension.

In TypeScript, interfaces extend other interfaces using the extends keyword.

4fill in blank

hard

Fill both blanks to create an interface Admin that extends Employee and adds a role property of type string.

Typescript

interface Admin [1] [2] {
  role: string;
}

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

Aextends

Bimplements

CEmployee

DPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using implements or extending the wrong interface.

The Admin interface extends Employee using the extends keyword.

5fill in blank

hard

Fill all three blanks to define an interface SuperAdmin that extends Admin, adds a level property of type number, and a method accessAllAreas returning boolean.

Typescript

interface SuperAdmin [1] [2] {
  level: number;
  [3](): boolean;
}

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

Aextends

BAdmin

CaccessAllAreas

DPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong keywords or method syntax in interface declarations.

The SuperAdmin interface extends Admin and declares the method accessAllAreas.