Extending interfaces in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of extended interface property access

What is the output of this TypeScript code when compiled and run with Node.js?

Typescript

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };
console.log(myDog.name + " is a " + myDog.breed);

A Buddy is a undefined

B Buddy is a Golden Retriever

C Error: Property 'breed' does not exist on type 'Dog'

D undefined is a Golden Retriever

💡 Hint

Remember that extending an interface adds properties from the base interface.

The interface Dog extends Animal, so it has both 'name' and 'breed'. The object myDog has both properties, so accessing them prints the combined string.

❓ Predict Output

intermediate

Output when extending multiple interfaces

What will this TypeScript code output when run?

Typescript

interface A {
  x: number;
}
interface B {
  y: number;
}
interface C extends A, B {
  z: number;
}
const obj: C = { x: 1, y: 2, z: 3 };
console.log(obj.x + obj.y + obj.z);

A 6

B NaN

C 123

D Error: Property 'y' does not exist on type 'C'

💡 Hint

Extending multiple interfaces combines their properties.

Interface C extends both A and B, so it has properties x, y, and z. The sum 1 + 2 + 3 equals 6.

🔧 Debug

advanced

Why does this extended interface cause a type error?

This TypeScript code causes a type error. What is the reason?

Typescript

interface Base {
  id: number;
}
interface Extended extends Base {
  id: string;
}
const obj: Extended = { id: "abc" };

A Object 'obj' must have both number and string types for 'id'

B Missing property 'id' in object literal

C Interface Extended must not extend Base

D Cannot redeclare property 'id' with a different type in the extended interface

💡 Hint

Check if property types are compatible when extending interfaces.

The interface Extended tries to change the type of 'id' from number to string, which is not allowed in TypeScript interface extension.

📝 Syntax

advanced

Identify the syntax error in interface extension

Which option contains the correct syntax to extend interface Person with interface Employee?

A interface Employee extends Person { salary: number; }

B interface Employee Person extends { salary: number; }

C interface Employee : Person { salary: number; }

D interface Employee inherits Person { salary: number; }

💡 Hint

The keyword to extend an interface is 'extends'.

Only option A uses the correct syntax 'extends' to inherit from another interface.

🚀 Application

expert

Number of properties in extended interface object

Given these interfaces and object, how many properties does the object 'fullProfile' have?

Typescript

interface Contact {
  email: string;
}
interface Profile extends Contact {
  username: string;
  age: number;
}
const fullProfile: Profile = {
  email: "[e-mail]",
  username: "user123",
  age: 30
};

A 1

B 2

C 3

D 4

💡 Hint

Count all properties from the base and extended interfaces present in the object.

The object fullProfile has 'email' from Contact and 'username' and 'age' from Profile, totaling 3 properties.