What is the difference between Interfaces vs Types in TypeScript?

Moustafa25MM — Tue, 28 Mar 2023 00:43:11 +0000

The difference between types and interfaces in TypeScript used to be more clear, but with the latest versions of TypeScript, they’re becoming more similar.

Interfaces are basically a way to describe data shapes, for example, an object.

Type is a definition of a type of data, for example, a union, primitive, intersection, tuple, or any other type.

some Differences in some topics:

1-Functions:
Both can be used to describe the shape of an object or a function signature. But the syntax differs.

Interface
interface Point {
x: number;
y: number;
}

interface SetPoint {
(x: number, y: number): void;
}

Type
type Point = {
x: number;
y: number;
};

type SetPoint = (x: number, y: number) => void;

2-Declaration merging

Unlike a type alias, an interface can be defined multiple times, and will be treated as a single interface (with members of all declarations being merged).

3-Extends and Implements:
In TypeScript, we can easily extend and implement interfaces. This is not possible with types though.

Interfaces in TypeScript can extend classes, this is a very awesome concept that helps a lot in a more object-oriented way of programming. We can also create classes implementing interfaces.

4-Intersection (&):

Intersection allows us to combine multiple types into a single one type. To create an intersection type, we have to use the (&) keyword,
type Name = {
name: “string”
};

type Age = {
age: number
};

type Person = Name & Age;

The nice thing here is that we can create a new intersection type combining two interfaces, for example, but not the other way around. We cannot create an interface combining two types, because it doesn’t work,

interface Name {
name: “string”
};

interface Age {
age: number
};

type Person = Name & Age;

5-Union (|):
Union types allow us to create a new type that can have a value of one or a few more types. To create a union type, we have to use the | keyword,

type Man = {
name: “string”
};

type Woman = {
name: “string”
};

type Person = Man | Woman;

Similar to intersections, we can create a new union type combining two interfaces, for example, but not the other way around:

interface Man {
name: "string"
};

interface Woman {
name: "string"
};

type Person = Man | Woman;

**Summary of Type Aliases vs Interfaces
Your mileage may differ, but wherever possible, I stick to type aliases for their flexibility and simpler syntax. That is, I pick type aliases except I specifically need features from an interface.

For the most part, you can also decide based on your personal preference, but stay consistent with your choice — at least in a single given project.

For completeness, I must add that in performance critical types, interface comparison checks can be faster than type aliases. I’m yet to find this to be an issue.

DEV Community: Moustafa25MM

What is the difference between Interfaces vs Types in TypeScript?

Unlike a type alias, an interface can be defined multiple times, and will be treated as a single interface (with members of all declarations being merged).

Interfaces in TypeScript can extend classes, this is a very awesome concept that helps a lot in a more object-oriented way of programming. We can also create classes implementing interfaces.

type Person = Man | Woman;