Common confusion when using TypeScript: What is the difference between interface and type?

Author: SARANSH KATARIA
Translator: Frontend Xiaozhi
Source: wisdomgeek

There are dreams and dry goods. search 160dbc922b1dc8 [Great Move to the World] pay attention to the wisdom of brushing the dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

When we use TypeScript, we will use interface and type . We usually feel that their usage seems to be the same, there is no difference, and they can be used very well, so we rarely really understand the difference between them. We have developed to define types often or like this:

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

Or define it like this:

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

interface and type is not just a minor syntax statement. So, today we will take a look at the ulterior secrets between these two guys.

Types and type aliases

TypeScript has basic types such as boolean , number , string If we want to declare advanced types, we need to use the type alias .

Type aliases refer to creating new names for types. need to pay attention to , we did not define a new type. Using the type keyword may make us think that we are creating a new type, but we are just giving a new name to a type.

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

interface

In contrast to type , the 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, the interface is restricted to the object type .

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 worth noting is that interfaces and type aliases are not mutually exclusive. Type aliases can inherit interfaces and vice versa.

For one 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; }

Type inherits another type:

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

Or, inherit an interface:

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

achieve

Classes can implement interfaces and types (TS 2.7+). However, the class 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 type

Although interfaces can be extended and merged, they cannot be combined in the form of union and intersection. 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 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 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

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

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

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

interface Point {
  coordinates: [number, number]
}

Which one should we use?

Generally speaking, the 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 functions. In addition, we use whichever we like, but it should be consistent throughout the code base.

~End, I’m Xiaozhi, I’m going to teach the front-end little sister.

---

possible bugs that may exist after 160dbc922b234f code is deployed cannot be known in real time. To solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

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

communicate with

There are dreams and dry goods. WeChat search [Moving to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.