Extending Interfaces
Build a new interface on top of an existing one with extends.
Syntax
interface Admin extends User { role: string; }Interfaces can extend other interfaces to inherit their properties. The new interface gets everything from the parent plus whatever you add.
This lets you compose small, focused shapes into larger ones without repeating properties.
Example
Loading editor…
Press Run to execute the code.
When to use it
- A base Entity interface holds id and createdAt, and User extends it to add name and email without duplication.
- A library defines a BaseConfig interface and consumers extend it to add application-specific options.
- An admin role interface extends a regular User interface to add a permissions array field.
More examples
Extend a base interface
Dog inherits all Animal properties via extends and adds its own, so a Dog value must satisfy both shapes.
interface Animal {
name: string;
age: number;
}
interface Dog extends Animal {
breed: string;
}
const rex: Dog = { name: 'Rex', age: 3, breed: 'Labrador' };Extend multiple interfaces
Extends two separate interfaces at once to compose a Post shape with identity, timestamps, and content fields.
interface Timestamped {
createdAt: Date;
updatedAt: Date;
}
interface Identifiable {
id: number;
}
interface Post extends Identifiable, Timestamped {
title: string;
body: string;
}Override a property type in extension
Narrows an inherited property type from string to a literal union in the child interface.
interface Shape {
color: string;
}
interface ColoredCircle extends Shape {
color: 'red' | 'blue' | 'green'; // narrowed from string
radius: number;
}
const c: ColoredCircle = { color: 'red', radius: 10 };
Discussion