Extending Interfaces in TypeScript

Analogy categoryAnalogies

1. Introduction

Interfaces can build on top of other interfaces using the extends keyword, inheriting all of their members and adding new ones. This lets you compose specialized shapes from shared base shapes without repeating property declarations, similar to inheritance in object-oriented design but applied purely to type shapes.

🏏

Cricket analogy: A TestPlayer interface can extend a base Player interface to inherit name and team while adding testCap and redBallAverage, composing a specialized shape without repeating shared fields.

2. Syntax

typescript

interface Animal {
  name: string;
  age: number;
}

interface Pet extends Animal {
  owner: string;
}

// Extending multiple interfaces at once
interface Named {
  name: string;
}
interface Aged {
  age: number;
}
interface Person extends Named, Aged {
  occupation: string;
}

3. Explanation

An interface using extends inherits every member of the base interface(s) and then adds its own. Unlike classes in most mainstream languages, TypeScript interfaces support extending more than one interface at a time — simply separate the base interface names with commas after extends. The resulting interface must be compatible with all of its base interfaces, meaning any property that appears in more than one base must have a compatible (not conflicting) type in the extending interface.

🏏

Cricket analogy: An AllRounder interface could extend both Batsman and Bowler at once, comma-separated after extends, inheriting every stat field from both — but average must be compatible across both bases or TypeScript flags a conflict.

Type aliases achieve a similar composition using intersection types (type Pet = Animal & { owner: string }) instead of extends. The practical result is often equivalent, but interface extends gives clearer compiler errors when a property type conflicts, because the extension relationship is checked explicitly at the point of inheritance rather than only when the intersection is used.

🏏

Cricket analogy: Instead of interface AllRounder extends Batsman, Bowler, a type alias could write type AllRounder = Batsman & Bowler, but the extends form gives a clearer error the moment average conflicts between the two bases.

Gotcha: because interfaces support multiple inheritance via extends, it's possible for two base interfaces to declare the same property name with incompatible types. TypeScript will report an error at the extends clause itself (e.g., 'Interface X cannot simultaneously extend types A and B'), which is generally easier to diagnose than the equivalent conflict inside an intersection type, which can silently collapse an incompatible property to type never.

4. Example

typescript

interface Shape {
  color: string;
}

interface Sized {
  area(): number;
}

// Multiple interface extension
interface Circle extends Shape, Sized {
  radius: number;
}

const circle: Circle = {
  color: "red",
  radius: 5,
  area() {
    return Math.PI * this.radius * this.radius;
  },
};

console.log(`${circle.color} circle, area = ${circle.area().toFixed(2)}`);

// Sub-interface further extends Circle
interface LabeledCircle extends Circle {
  label: string;
}

const labeled: LabeledCircle = { ...circle, label: "Main Circle" };
console.log(labeled.label, labeled.color, labeled.radius);

5. Output

text

red circle, area = 78.54
Main Circle red 5

6. Key Takeaways

'extends' lets an interface inherit all members of one or more base interfaces.
TypeScript interfaces support multiple inheritance: 'interface C extends A, B { ... }' is valid.
Type aliases achieve similar composition via intersection ('&') rather than 'extends'.
Conflicting property types across extended interfaces raise a clear error at the extends clause.
Extension chains can be nested arbitrarily deep (an interface can extend an interface that itself extends others).

Practice what you learned

1. How many interfaces can a single TypeScript interface extend at once?

2. What is the type-alias equivalent of interface inheritance via 'extends'?

3. What happens if two interfaces being extended both declare a property with the same name but incompatible types?

4. Can an interface extend another interface that itself already extends a different interface (a multi-level chain)?

5. In `interface Circle extends Shape, Sized { radius: number }`, what members does Circle end up with?

Was this page helpful?

Optional and Readonly Properties in TypeScript

Index Signatures in TypeScript

Related Study Notes in Programming

Browse all study notes

Programming

Apache Spark Study Notes

Programming · 30 topics

Programming

Apache Flink Study Notes

Programming · 30 topics

Programming

Hadoop Study Notes

Programming · 30 topics

Programming

Snowflake Study Notes

Programming · 30 topics

Programming

Apache Airflow Study Notes

Programming · 30 topics

Programming

dbt (Data Build Tool) Study Notes

Programming · 30 topics

Topics covered

#TypeScript#TypeScriptProgrammingStudyNotes#Programming#ExtendingInterfacesInTypeScript#Extending#Interfaces#Syntax#Explanation#StudyNotes#SkillVeris

1. Introduction

2. Syntax

3. Explanation

4. Example

5. Output

6. Key Takeaways

Practice what you learned

You May Also Like

Related Reading

Related Study Notes in Programming

Topics covered