Shulou(Shulou.com)05/31 Report--

This article mainly explains "what are the differences between interface and type in TypeScript". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the differences between interface and type in TypeScript".

When we use TypeScript, we will use interface and type, usually feel like they are the same, there is no difference, can be very good use, so it is rare to really understand the difference between them. We have developed frequently or this way to define types:

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

Or define it this way:

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

The difference between interface and type is more than just a secondary syntax declaration. So, today we're going to find out what's the secret between these two guys.

Types and type aliases

TypeScript has basic types such as boolean, number, string and so on. 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. It should be noted that we do not define a new type. Using the type keyword may make us feel like creating a new type, but we're just giving a type a new name.

So when we type, we are not creating a new category, but an alias that defines the type.

Interface

In contrast to type, interfaces are limited to object types. They are a way to describe objects and their properties. Type alias declarations 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 their differences, let's take a look at their similarities.

Both can be inherited.

Both interface and type can inherit. Another thing to note 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;}; implementation

Classes can implement interfaces as well as types (TS 2.7 +). However, classes cannot implement federated 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 errorclass SomePartialPoint implements PartialPoint {x = 1; y = 2;} Union and intersection types of interface and type

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

/ / objecttype PartialPointX = {x: number;}; type PartialPointY = {y: number;}; / / Union type PartialPoint = PartialPointX | PartialPointY;// intersection type PartialPoint = PartialPointX & PartialPointY; declare 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}; tuple type

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

Type Point = [x: number, y: number]

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

Interface Point {coordinates: [number, number]} 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 declaration merge functionality. In addition, we can use whichever we like, but it should be consistent throughout the code base.

Thank you for reading, the above is the content of "what is the difference between interface and type in TypeScript". After the study of this article, I believe you have a deeper understanding of the difference between interface and type in TypeScript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.