Differences Between Type and Interface in TypeScript

In a TypeScript workshop, someone asked about the difference between type and interface in TypeScript. In this tutorial, I will explain the differences between type and interface in TypeScript.

TypeScript, a superset of JavaScript, introduces static types to enhance code quality and developer productivity. Two fundamental constructs for defining types are type and interface. While they can often be used interchangeably, they have distinct features that make them suitable for different scenarios.

Table of Contents

Differences Between Type and Interface in TypeScript

Here are a few differences between type and interface in TypeScript.

Extendability

Interface: Interfaces are extendable. You can reopen them to add new properties.
Type: Types are not extendable. Once defined, they cannot be reopened to add new properties.

Interfaces can be extended using the extends keyword, making them ideal for scenarios where you need to add properties to an existing structure.

interface Person {
    firstName: string;
    lastName: string;
}

interface Employee extends Person {
    employeeId: number;
}

const employee: Employee = {
    firstName: "Alice",
    lastName: "Johnson",
    employeeId: 1234
};

Types can also be extended, but they use intersection types (& operator) to achieve this.

type Person = {
    firstName: string;
    lastName: string;
};

type Employee = Person & {
    employeeId: number;
};

const employee: Employee = {
    firstName: "Bob",
    lastName: "Williams",
    employeeId: 5678
};

Declaration Merging

Interface: Supports declaration merging, allowing multiple declarations to be combined.
Type: Does not support declaration merging.

Interfaces support declaration merging, which means you can define the same interface in multiple places, and TypeScript will merge them into a single interface.

interface Car {
    make: string;
    model: string;
}

interface Car {
    year: number;
}

const car: Car = {
    make: "Tesla",
    model: "Model S",
    year: 2022
};

Types do not support declaration merging. If you try to define the same type twice, TypeScript will throw an error.

Usage

Interface: Primarily used for defining the shape of objects.
Type: More versatile, allowing unions, intersections, and complex type definitions.

Check out Difference Between == and === in TypeScript

Use Cases of TypeScript Type and Interface

Let me explain now when to use the interface and when to use type in TypeScript.

When to Use Interface

Defining the shape of objects, especially when you need to extend them later.
When you require declaration merging.

When to Use Type

Creating complex types using unions and intersections.
Defining function signatures, tuples, and other non-object types.

Read Differences Between TypeScript and JavaScript

Interface and Type Examples

Now, let me show you an example of an interface and type.

Interface Example

Let’s define an interface for a Person object:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
  address: {
    street: string;
    city: string;
    state: string;
    zipCode: string;
  };
}

const johnDoe: Person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Springfield",
    state: "IL",
    zipCode: "62704"
  }
};

Type Example

Now, let’s define a type for a Vehicle:

type Vehicle = {
  make: string;
  model: string;
  year: number;
  owner: Person;
};

const myCar: Vehicle = {
  make: "Tesla",
  model: "Model S",
  year: 2022,
  owner: {
    firstName: "Jane",
    lastName: "Smith",
    age: 28,
    address: {
      street: "456 Elm St",
      city: "Chicago",
      state: "IL",
      zipCode: "60616"
    }
  }
};

Combine Interface and Type

You can also combine interfaces and types for more complex scenarios:

interface Employee extends Person {
  employeeId: number;
  department: string;
}

type Manager = Employee & {
  subordinates: Employee[];
};

const manager: Manager = {
  firstName: "Alice",
  lastName: "Johnson",
  age: 40,
  address: {
    street: "789 Oak St",
    city: "Naperville",
    state: "IL",
    zipCode: "60540"
  },
  employeeId: 1,
  department: "Engineering",
  subordinates: [
    {
      firstName: "Bob",
      lastName: "Brown",
      age: 35,
      address: {
        street: "101 Pine St",
        city: "Evanston",
        state: "IL",
        zipCode: "60201"
      },
      employeeId: 2,
      department: "Engineering"
    }
  ]
};

Read Is TypeScript Frontend or Backend?

Type Vs. Interface in TypeScript: Summary

Feature	Interface	Type
Extendability	Yes, can be extended	No, cannot be reopened
Declaration Merging	Yes, supports declaration merging	No, does not support declaration merging
Primary Usage	Defining object shapes	Creating complex types (unions, intersections) and non-object types
Example Use Case	Defining a `Person` object	Defining a `Vehicle` type
Combination	Can extend other interfaces and type aliases	Can combine with interfaces using intersection operator

Conclusion

In this tutorial, I explained the difference between type and interface in TypeScript and explained when to use interface and when to use Type in TypeScript.