Multiple interface extension in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend interface B from interface A.

Typescript

interface A {
  name: string;
}

interface B extends [1] {
  age: number;
}

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

APerson

BB

CC

DA

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the wrong interface name after 'extends'.

Forgetting to use 'extends' keyword.

Interface B extends interface A, so it inherits the properties of A.

2fill in blank

medium

Complete the code to extend interface C from interfaces A and B.

Typescript

interface A {
  name: string;
}

interface B {
  age: number;
}

interface C extends [1] {
  location: string;
}

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

AA B

BA, B

CA | B

DA & B

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' or '|' instead of commas.

Forgetting commas between interface names.

To extend multiple interfaces, list them separated by commas after 'extends'.

3fill in blank

hard

Fix the error in the interface extension syntax.

Typescript

interface A {
  name: string;
}

interface B extends [1] {
  age: number;
}

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

AA, B

BA & B

CA

DB

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' or commas when only one interface is extended.

Extending an interface that does not exist.

Interface B can only extend one interface at a time unless multiple are listed separated by commas. Here, only 'A' is correct.

4fill in blank

hard

Fill both blanks to correctly extend interface D from interfaces A and B.

Typescript

interface A {
  name: string;
}

interface B {
  age: number;
}

interface D extends [1][2] {
  location: string;
}

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

AA

B, B

C& B

D| B

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' or '|' instead of commas.

Missing the comma between interface names.

Multiple interfaces are extended by listing them separated by commas after 'extends'.

5fill in blank

hard

Fill all three blanks to create interface E that extends interfaces A, B, and C.

Typescript

interface A {
  name: string;
}

interface B {
  age: number;
}

interface C {
  location: string;
}

interface E extends [1][2][3] {
  email: string;
}

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

AA

B, B

C, C

D& C

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' or '|' operators instead of commas.

Missing commas between interface names.

To extend multiple interfaces, list them separated by commas after 'extends'.