Extending interfaces in Typescript - Step-by-Step Execution

Concept Flow - Extending interfaces

Define Base Interface

↓

Define Extended Interface

↓

Extended Interface has all Base + new members

↓

Use Extended Interface in code

↓

Access all properties from Base and Extended

You start with a base interface, then create a new interface that adds more properties by extending the base. The extended interface includes all properties from the base plus new ones.

Execution Sample

Typescript

interface Animal {
  name: string;
}
interface Dog extends Animal {
  breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Beagle" };

This code defines a base interface Animal and extends it with Dog, adding a breed property. Then it creates an object myDog with both properties.

Execution Table

Step	Action	Evaluation	Result
1	Define interface Animal with property name:string	Animal = { name: string }	Animal interface ready
2	Define interface Dog extending Animal adding breed:string	Dog = Animal + { breed: string }	Dog interface ready with name and breed
3	Create object myDog of type Dog with name and breed	myDog = { name: "Buddy", breed: "Beagle" }	myDog object created successfully
4	Access myDog.name	myDog.name	"Buddy"
5	Access myDog.breed	myDog.breed	"Beagle"
6	End of code execution		All properties accessed correctly

💡 All interface properties are defined and accessible; no errors.

Variable Tracker

Variable	Start	After Step 3	Final
Animal	undefined	{ name: string }	{ name: string }
Dog	undefined	extends Animal + { breed: string }	extends Animal + { breed: string }
myDog	undefined	{ name: "Buddy", breed: "Beagle" }	{ name: "Buddy", breed: "Beagle" }

Key Moments - 2 Insights

Why can myDog have both name and breed properties?

Because Dog extends Animal, it includes all properties from Animal (name) plus its own (breed). See execution_table rows 2 and 3.

What happens if myDog misses the breed property?

TypeScript will give an error because Dog requires both name and breed. This is shown in execution_table row 3 where both are provided.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of myDog.name at step 4?

A "Buddy"

B "Beagle"

C undefined

D Error

💡 Hint

Check execution_table row 4 where myDog.name is accessed.

At which step is the Dog interface defined to include properties from Animal?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table row 2 where Dog extends Animal.

If you remove the breed property from myDog, what will happen?

A No error, code runs fine

B myDog will have breed as undefined

C TypeScript error because breed is missing

D Only name property is required

💡 Hint

Refer to key_moments second question and execution_table row 3.

Concept Snapshot

interface Base { ... }
interface Extended extends Base { ... }
Extended has all Base properties plus new ones.
Use Extended to create objects with full set.
Missing required properties causes errors.

Full Transcript

This example shows how to extend interfaces in TypeScript. First, we define a base interface Animal with a name property. Then, we create a Dog interface that extends Animal and adds a breed property. When we create an object myDog of type Dog, it must have both name and breed. Accessing these properties works as expected. Extending interfaces lets you build on existing types by adding new properties, ensuring type safety and code reuse.