Lesson 10 +10 XP

Extending Interfaces & Declaration Merging

Extending Interfaces & Declaration Merging

Interfaces can inherit from other interfaces or merge multiple declarations together.

Extending Interfaces (extends)

Interfaces can inherit properties from one or multiple interfaces using extends.

interface Person {
  name: string;
}

interface Employee extends Person {
  salary: number;
  role: string;
}

const dev: Employee = {
  name: "Sarah",
  salary: 100000,
  role: "Senior Engineer"
};

Declaration Merging

Multiple interface declarations with the same name in the same scope automatically merge into a single interface.

interface Window {
  title: string;
}

interface Window {
  tsVersion: string;
}

// Resulting Window interface contains BOTH title and tsVersion properties!

TL;DR

  • Use extends to create composite interfaces and reuse object structures.
  • Declaration merging lets you augment existing interfaces (e.g. global window or library definitions).