Declaration merging for interfaces in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an interface named Person.

Typescript

interface [1] {
  name: string;
}

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

AUser

Bperson

CPerson

DEmployee

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for interfaces.

Using a different interface name than required.

The interface name must be Person to match the declaration.

2fill in blank

medium

Complete the code to add an age property to the Person interface using declaration merging.

Typescript

interface Person {
  [1]: number;
}

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

Ayears

Bage

CbirthYear

DdateOfBirth

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different property name than age.

Forgetting to specify the property type.

The property to add is age with type number.

3fill in blank

hard

Fix the error in the code by completing the interface declaration to merge properties.

Typescript

interface Person {
  name: string;
}

interface [1] {
  age: number;
}

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

APerson

BCustomer

CEmployee

DUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using different interface names prevents merging.

Forgetting that interface names are case-sensitive.

To merge declarations, both interfaces must have the same name Person.

4fill in blank

hard

Fill both blanks to create a merged interface with a method.

Typescript

interface [1] {
  name: string;
}

interface [2] {
  greet(): void;
}

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

APerson

BUser

CEmployee

DCustomer

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the two interfaces.

Not realizing that methods can be merged too.

Both interfaces must be named Person to merge their properties and methods.

5fill in blank

hard

Fill all three blanks to create a merged interface with properties and a method.

Typescript

interface [1] {
  name: string;
}

interface [2] {
  age: number;
  [3](): void;
}

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

APerson

BUser

Cgreet

DsayHello

Attempts:

3 left

💡 Hint

Common Mistakes

Using different interface names prevents merging.

Using a wrong method name.

The interface name must be Person for both declarations to merge, and the method name is greet.