A simple comparison to see the difference between interface and type in TypeScript

What is the difference between interface and type? This article will compare interface and type in TypeScript, let you know the difference between interface and type, and introduce which one to choose in actual use!

When we use TypeScript, we will use interface and type. It seems that they are used in the same way. There is no difference, they can all be used very well, so it is rare to really understand the difference between them. We often define types like this:

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

or like this:

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

interface The difference between type is not just Minor syntax declaration. So, today we will take a look at the hidden secrets between these two guys.

Types and type aliases

TypeScript has basic types such as boolean, number, string . If we want to declare a high-level type, we need to use type alias.

Type aliasing refers to creating a new name for a type. It should be noted that , we did not define a new type. Using the type keyword may make us think we are creating a new type, but we are just giving a type a new name.

So when we use type, we are not creating a new category, but just defining an alias of the type.

Interface

Contrary to type, interface is limited to object types. They are a way of describing objects and their properties. Type alias declarations can be used for any primitive type, union, or intersection. In this regard, interfaces are restricted to object types .

Similarities between interface and type

Before discussing their differences, let’s take a look at their similarities.

Both can be inherited

Both interface and type can be inherited. Another thing to note is that interfaces and type aliases are not mutually exclusive. Type aliases can inherit interfaces and vice versa.

For an interface, inherit another interface

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

Or, inherit a type

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

A type inherits another type:

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

Or, inherit a Interface:

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

Implementation

Classes can implement interfaces and 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;
}

The difference between interface and type

Union and intersection types

Although interfaces can be extended and merged, They cannot be combined in union and intersection forms. Types can use union and intersection operators to form new types.

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// 并集
type PartialPoint = PartialPointX | PartialPointY;

// 交集
type PartialPoint = PartialPointX & PartialPointY;

Declaration Merging

The TypeScript compiler merges two or more interfaces with the same name. This does not work with types. If we try to create two types with the same name but different properties, 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 };

Tuple type

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

type Point = [x: number, y: number];

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

interface Point {
  coordinates: [number, number]
}

Which one should we use?

Generally speaking, interfaces and types are very similar.

For public API definitions in libraries or third-party type definitions, interfaces should be used to provide declaration merging capabilities. Other than that, we can use whatever we like, but it should be consistent across the entire code base.

English original address: https://www.wisdomgeek.com/development/web-development/typescript/typescript-the-difference-between-interface-and-type/

Author: SARANSH KATARIA

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A simple comparison to see the difference between interface and type in TypeScript. For more information, please follow other related articles on the PHP Chinese website!