Understanding the Differences Between Interface Extension and Type Intersection in TypeScript

TypeScript is a popular statically-typed superset of JavaScript that adds a layer of safety and predictability to your code. When working with TypeScript, you'll often come across the concepts of interfaces and types, which help you define the structure and shape of your data. In this post, we'll dive deeper into two advanced TypeScript concepts: interface extension and type intersection.

Interface vs. Type

Before we delve into interface extension and type intersection, let's first understand the difference between interface and type in TypeScript.

An interface is a named set of properties and methods that define the structure of an object. It is a way of describing the shape of an object and is often used as a contract that a class or object must adhere to.

On the other hand, a type is a general term for any type in TypeScript, which can represent more than just an object. It can represent a union, intersection, primitive, tuple, or any other type.

Interface Extension

In TypeScript, interface extension allows you to create a new interface that extends the properties of an existing interface. This is useful when you want to add more properties or methods to an existing interface without duplicating its contents.

Here's an example of extending an interface:

Copycopy code to clipboard
interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  salary: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  salary: 50000
}

In this example, we've created a Person interface that defines the name and age properties. We then use interface extension to create an Employee interface that extends the Person interface and adds the salary property. We can then create an object that adheres to the Employee interface.

Type Intersection

TypeScript also allows you to combine types using the intersection operator (&). This creates a new type that has all the properties of both types.

Here's an example of type intersection:

Copycopy code to clipboard
type Person = {
  name: string;
  age: number;
};

type Employee = {
  salary: number;
};

type EmployeePerson = Employee & Person;

const employee: EmployeePerson = {
  name: "John",
  age: 30,
  salary: 50000
};

In this example, we've created two types: Person and Employee. We then use type intersection to create a new type called EmployeePerson that combines the properties of both Person and Employee. We can then create an object that adheres to the EmployeePerson type.

Final Thoughts

While both interface extension and type intersection can be used to achieve similar results, I personally prefer interface extension because it is more readable and easier to understand. Additionally, the TypeScript team recommends using interfaces until you need to use features of types and there are performance advantages to extending over intersecting as well.