The most common declaration merge in TS (interface merge)

Preface:

What I want to talk about today is still related to TS. The most common declaration merger in TS: interface merger

Before we talk about interface merging, let's talk about declaration merging

Declaration Merge:

What is declaration merging?

In fact, it is easy to understand that declaration merging in TS means that the compiler will merge declarations with the same name into one declaration.

The result of the merger:

The merged declaration will have the characteristics of two or more original declarations.

doubt:
So what do these two or more specifically refer to?

In fact, there are several situations to talk about. Today we will talk about one of them. The simplest and most common type of declaration merging is interface merging.

1. Merge interface

We just said that "the merged declaration will have the characteristics of two or more original declarations"

The same is true for merging interfaces, which puts the members of both parties into an interface with the same name.

It should be noted that the members in the interface include function members and non-function members, and the situation is different

1.1 Non-function members

For example:

interface Box {
    height: number;
}

interface Box {
    width: number;
}

let box: Box = {height: 2, width: 3};

In the above code, two interfaces with the same name Box are defined (in actual development, they may come from different files), and the contents will eventually be mixed together.

However, it should be noted that the members in the above cases are unique. However, if two interfaces declare non-function members with the same name and their types are different, the compiler will report an error.

1.2 Function members

For the function members inside, each function declaration with the same name will be treated as an overload of this function. And when interface A is merged with a later interface A, the later interface has a higher priority

For example, the official example:

interface Cloner {
    clone(animal: Animal): Animal;
}

interface Cloner {
    clone(animal: Sheep): Sheep;
}

interface Cloner {
    clone(animal: Dog): Dog;
    clone(animal: Cat): Cat;
}

Eventually they will be combined into one statement, as follows:

interface Cloner {
    clone(animal: Dog): Dog;
    clone(animal: Cat): Cat;
    clone(animal: Sheep): Sheep;
    clone(animal: Animal): Animal;
}

Two points to note:

• The declaration order in each group of interfaces remains unchanged
• The order between the groups of interfaces is that the later interface overloads appear in the first position
  

There are exceptions, however: when special function signatures appear. If a parameter in the signature has a type that is a single string literal (i.e. not a union of string literals), it will be promoted to the top of the overload list.

This is the end of this article about the most common declaration merging (interface merging) in TS. For more information about interface merging in TS, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!