Web Front-end Engineer (Senior)

Web Front-end Engineer (JS)

Senior Java Development Engineer (Microservices /Spring Cloud)

Senior Python Development Engineer

When we use TypeScript, we use interface and Type, and it feels like they’re used the same way, so we don’t really understand what the difference is. We’ve developed ways to define a type:

interface Point {
    x: number;
    y: number;
}
Copy the code

Or define it this way:

type Point = {
    x: number;
    y: number;
};
Copy the code

The difference between interface and type is not just a minor syntax statement. So, today we’re going to find out what’s going on between these two guys.

Type and type alias

TypeScript has Boolean, number, string, and other basic types. If we want to declare advanced types, we need to use type aliases.

A type alias refers to creating a new name for a type. Note that we are not defining a new type. Using the type keyword might feel like creating a new type, but we’re just giving a type a new name.

So when we use type, we’re not creating a new category, we’re just defining an alias for the type.

interface

In contrast to type, interfaces are limited to object types. They are a way of describing objects and their properties. A type alias declaration can be used for any primitive type, union, or intersection. In this respect, interfaces are restricted to object types.

Similarities between interface and type

Before we discuss the differences, let’s look at the similarities.

Both can be inherited

Both interface and type can be inherited. It is also worth noting that interface and type aliases are not mutually exclusive. Type aliases can inherit interfaces and vice versa.

For one interface, inherit from another

interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }
Copy the code

Or, inherit a type

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }
Copy the code

A type inherits from another type:

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
Copy the code

Alternatively, inherit an interface:

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };
Copy the code

implementation

Classes can implement interfaces as well as types (TS 2.7+). However, classes cannot implement union types.

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

class SomePoint implements Point {
 x = 1;
 y = 2;
}

type AnotherPoint = {
 x: number;
 y: number;
};

class SomePoint2 implements AnotherPoint {
 x = 1;
 y = 2;
}

type PartialPoint = { x: number; } | { y: number; };

// Following will throw an error
class SomePartialPoint implements PartialPoint {
 x = 1;
 y = 2;
}
Copy the code

Interface and Type

Union and intersection types

While interfaces can be extended and merged, they cannot be combined in the form of unions and intersections. Types can use the union and intersection operators to form new types.

// object type PartialPointX = { x: number; }; type PartialPointY = { y: number; }; / / and set the type PartialPoint = PartialPointX | PartialPointY; // Intersection type PartialPoint = PartialPointX & PartialPointY;Copy the code

A statement to merge

The TypeScript compiler merges two or more interfaces with the same name. This does not apply to types. If we try to create two types with the same name but different attributes, the TypeScript compiler will throw an error.

// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };
Copy the code

A tuple type

Tuples (key-value pairs) can only be defined by the type keyword.

type Point = [x: number, y: number];
Copy the code

There is no way to declare tuples using interfaces. However, we can use tuples inside the interface

interface Point {
  coordinates: [number, number]
}
Copy the code

Which one should we use?

In general, interfaces and types are very similar.

For public API definitions in libraries or third-party type definitions, interfaces should be used to provide declarative merge capabilities. Other than that, we can use whatever we like, but there should be consistency throughout the code base.