TypeScript extends: Extend an Interface or a Type

interface Child extends Parent creates a new interface with every member of Parent plus its own. Values of the child type can be used wherever the parent is expected, because they have all of its properties.

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

interface Dog extends Animal {
  breed: string;
  bark(): string;
}

const rex: Dog = {
  name: "Rex",
  age: 4,
  breed: "collie",
  bark() {
    return `${this.name} says woof`;
  },
};

function birthday(a: Animal): number {
  return a.age + 1;
}

console.log(rex.bark());    // Rex says woof
console.log(birthday(rex)); // 5: a Dog is also an Animal

The same keyword appears in four places in TypeScript, with related but different meanings:

Extending Multiple Interfaces

List several parents after extends, separated by commas. The result has the members of all of them:

interface Identified {
  id: number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface Post extends Identified, Timestamped {
  title: string;
}

// Post requires id, createdAt, updatedAt and title

If two parents declare the same property with types that are not identical, the child is error TS2320 (Interface 'Post' cannot simultaneously extend types 'A' and 'B'), unless the child redeclares that property with a type assignable to both.

Extending a Type Alias

A type alias has no extends clause. You build on it with an intersection, &, which combines the members of both sides. An interface can also extend an object type alias directly, and a type alias can intersect an interface: the two kinds mix freely.

type Timestamps = { createdAt: string; updatedAt: string };
type WithId = { id: number };

// type alias: extend with &
type Post = WithId & Timestamps & { title: string };

// interface: extends works on object type aliases too
interface Reply extends WithId, Timestamps {
  postId: number;
  body: string;
}

const post: Post = { id: 1, title: "Hello", createdAt: "2024-03-15", updatedAt: "2024-03-15" };
const reply: Reply = { id: 7, postId: 1, body: "Nice", createdAt: "2024-03-16", updatedAt: "2024-03-16" };

console.log(post.title, reply.body, reply.postId === post.id); // Hello Nice true

The two routes behave the same until properties conflict: extends reports a conflicting property at the declaration, while & silently turns it into never. The comparison is on the interface vs type page, and the details of & are on the intersection types page.

Overriding Property Types

A child interface may redeclare a parent property, but only with a type that is assignable to the parent's. Narrowing string to a literal, or removing null from a union, is allowed. Changing the type to something unrelated is not:

// This does not compile: kind cannot become a number
interface Shape {
  kind: string;
  color: string | null;
}

interface Circle extends Shape {
  kind: "circle"; // narrower than string: allowed
  color: string;  // narrower than string | null: allowed
  radius: number;
}

interface Label extends Shape {
  kind: number;   // not assignable to string: error
}

const c: Circle = { kind: "circle", color: "red", radius: 2 };
console.log(c);

index.ts(13,11): error TS2430: Interface 'Label' incorrectly extends interface 'Shape'.
  Types of property 'kind' are incompatible.
    Type 'number' is not assignable to type 'string'.

The rule exists so that a Label could still be used everywhere a Shape is expected. If kind could be a number, code written for Shape that calls shape.kind.toUpperCase() would break.

Replacing Properties with Omit

When you really need a different type for an inherited property, remove it from the parent first with Omit, then declare the new one. A common case is converting API data, where ids and dates arrive as strings:

interface ApiUser {
  id: string; // the API sends ids as strings
  name: string;
  createdAt: string;
}

// Drop the properties to change, then declare them again
interface User extends Omit<ApiUser, "id" | "createdAt"> {
  id: number;
  createdAt: Date;
}

function toUser(raw: ApiUser): User {
  return { ...raw, id: Number(raw.id), createdAt: new Date(raw.createdAt) };
}

const u = toUser({ id: "42", name: "Ada", createdAt: "2024-03-15T10:30:00Z" });
console.log(u.id + 1, u.createdAt.toISOString()); // 43 2024-03-15T10:30:00.000Z

Omit<ApiUser, "id" | "createdAt"> is { name: string }, so the new id and createdAt do not conflict with anything. Pick, Partial and the other utility types can be extended the same way.

extends with Classes

class Dog extends Animal is JavaScript class inheritance, and unlike interface extends it exists at runtime: Dog gets Animal's constructor, fields and method implementations, and new Dog(...) instanceof Animal is true. TypeScript adds type checks on top, such as the override keyword:

class Animal {
  constructor(public name: string) {}
  speak(): string {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  override speak(): string {
    return `${this.name} barks`;
  }
}

const pets: Animal[] = [new Animal("Generic"), new Dog("Rex")];
for (const p of pets) console.log(p.speak());
// Generic makes a sound
// Rex barks

A class can extends only one class, but it can implements any number of interfaces. implements copies nothing: it only checks that the class declares what the interface requires. super, protected members and override are covered in inheritance.

extends in Generics and Conditional Types

Inside angle brackets, extends is a constraint. <T extends { length: number }> accepts any type argument that has a numeric length, and lets the function body use .length. In a conditional type, T extends U ? X : Y asks whether T is assignable to U.

// Generic constraint: T must have a length property
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

console.log(longest("apple", "fig"));    // apple
console.log(longest([1, 2], [1, 2, 3])); // [ 1, 2, 3 ]

// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.
longest(10, 20);

// Conditional type: a type-level if/else
type IsString<T> = T extends string ? "yes" : "no";
const a: IsString<"hi"> = "yes";
const b: IsString<42> = "no";
console.log(a, b); // yes no

In both places extends means "is assignable to", the same relation the interface form checks. Constraints are covered in depth in generic constraints, and type-level tests in conditional types.