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'.

Practice

1. What does interface C extends A, B mean in TypeScript?

easy

A. Interface C is unrelated to interfaces A and B.

B. Interface C can only have properties from A or B, not both.

C. Interface C replaces interfaces A and B completely.

D. Interface C includes all properties from interfaces A and B.

Solution

1. Step 1: Understand interface extension

   When an interface extends others, it inherits all their properties.

2. Step 2: Apply to multiple interfaces

   Extending both A and B means C has all properties from both interfaces combined.

3. Final Answer:

   Interface C includes all properties from interfaces A and B. -> Option D

4. Quick Check:

   Multiple interface extension = combined properties [OK]

Hint: Extending multiple interfaces merges all their properties [OK]

Common Mistakes:

• Thinking extension replaces interfaces
• Believing only one interface's properties are included
• Confusing extension with implementation

2. Which of the following is the correct syntax to extend two interfaces A and B in TypeScript?

easy

A. interface C extends A, B {}

B. interface C extends (A & B) {}

C. interface C implements A, B {}

D. interface C inherits A, B {}

Solution

1. Step 1: Recall TypeScript interface extension syntax

   Interfaces extend others using extends followed by comma-separated interfaces.

2. Step 2: Check each option

   interface C extends A, B {} uses correct syntax: interface C extends A, B {}. Others are invalid syntax.

3. Final Answer:

   interface C extends A, B {} -> Option A

4. Quick Check:

   Correct syntax uses extends with commas [OK]

Hint: Use 'extends A, B' to extend multiple interfaces [OK]

Common Mistakes:

• Using implements instead of extends for interfaces
• Using parentheses or & inside extends
• Using 'inherits' keyword which doesn't exist

3. Given the code:

interface A { x: number; }
interface B { y: string; }
interface C extends A, B { z: boolean; }
const obj: C = { x: 10, y: "hello", z: true };

What is the type of obj?

medium

A. { x: number; z: boolean; }

B. { x: number; y: string; z: boolean; }

C. { y: string; z: boolean; }

D. { x: number; y: string; }

Solution

1. Step 1: Understand interface C extension

   Interface C extends A and B, so it has properties x (number), y (string), and its own z (boolean).

2. Step 2: Analyze object type

   The object has all three properties with correct types, matching combined interface C.

3. Final Answer:

   { x: number; y: string; z: boolean; } -> Option B

4. Quick Check:

   Extended interface properties combine in object type [OK]

Hint: Extended interfaces combine all properties in the new type [OK]

Common Mistakes:

• Ignoring properties from one of the extended interfaces
• Missing the new property z in interface C
• Confusing property types

4. What is wrong with this code?

interface A { a: number; }
interface B { b: string; }
interface C extends A, B {}
const obj: C = { a: 5 };

medium

A. Property 'b' is missing in object assigned to type C.

B. Interface C cannot extend two interfaces.

C. Property 'a' should be a string, not number.

D. Object syntax is invalid.

Solution

1. Step 1: Check interface C properties

   Interface C extends A and B, so it requires properties 'a' (number) and 'b' (string).

2. Step 2: Check object assigned to C

   The object only has 'a', missing required 'b' property, causing a type error.

3. Final Answer:

   Property 'b' is missing in object assigned to type C. -> Option A

4. Quick Check:

   All extended interface properties must be present [OK]

Hint: All properties from extended interfaces must be included [OK]

Common Mistakes:

• Assuming extending multiple interfaces is invalid
• Ignoring missing properties in object
• Confusing property types

5. You have interfaces:

interface Name { first: string; last: string; }
interface Contact { email: string; phone: string; }
interface Employee extends Name, Contact { id: number; }

Which object correctly implements Employee?

hard

A. { email: "[e-mail]", phone: "123-456", id: 101 }

B. { first: "Jane", last: "Doe", id: 101 }

C. { first: "Jane", last: "Doe", email: "[e-mail]", phone: "123-456", id: 101 }

D. { first: "Jane", last: "Doe", email: "[e-mail]", id: 101 }

Solution

1. Step 1: List required properties of Employee

   Employee extends Name and Contact, so it needs first, last, email, phone, and also id.

2. Step 2: Check each object for all required properties

   Only { first: "Jane", last: "Doe", email: "[e-mail]", phone: "123-456", id: 101 } has all five properties with correct types.

3. Final Answer:

   { first: "Jane", last: "Doe", email: "[e-mail]", phone: "123-456", id: 101 } -> Option C

4. Quick Check:

   All extended interface properties plus own must be present [OK]

Hint: Include all properties from all extended interfaces plus new ones [OK]

Common Mistakes:

• Missing some properties from extended interfaces
• Confusing which properties belong to which interface
• Leaving out the new property id