Comparison of Typescript type and interface

Always wondered about this. Came across the exact explanation on the official TS Handbook just now.

tldr
Types and interfaces are interchangable in many cases with a couple of exceptions.

These are the most notable differences. You can read about the more subtle differences in the links at the end.

Syntax to extend/add fields

Interfaces use extends.

interface User { ... }
 
interface AdminUser extends User { ... }

Types are not “extended” but can be declared with another type.

type User = { ... }
 
type AdminUser = User & { ... }

Both work similarly, except for when extending deep nested properties. An extending interface cannot contain a property that has different shape from the extended interface's property.

interface Foo {
  foo: {
    a: string;
  }
}
 
interface ExtendedFoo extends Foo {
  foo: {
    b: string;
  }
}

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgGIHt3IN4ChnIyYBcO+BycpAzmFKAOYDc5Avru7qJLIigKIAPSCAAmEURiwRhEMdTSYyBIulJ4KyAEY06jFgXacwATwAOKKQBVzKALzLCJRwSrJa9EMzYcWuUxbIAJLg0NQQCJCSSg7WtsgAZI6q6uQEOu56XgbIRri4COggtMiQtKQhPOGRElLIDhpOai6UpABEcG0ANGna7VptPqxAA

Credit: Tim at the Lunch Dev Discord

Union types

We can define named union types.

type BoxWidth = number | string;

type DigitalProduct = { ... }
type PhysicalProduct = { ... }
 
type Product = DigitalProduct | PhysicalProduct;

We cannot do this with interfaces.

Declaration merging

We can merge new fields to an existing interface's fields by declaring it again. (💭 Idk if I ever want to do this if I could help it though??)

interface User {
  id: number;
}
 
interface User {
  username: string;
}

We cannot do this with types.

Credit: Alex at the Lunch Dev Discord

References:

In: TypeScript MOC