“This is the 24th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

We’ve covered a lot about TS, including basic types, interfaces, types, generics, enumerations, type inference and compatibility, modules and namespaces, as well as the module resolution process and the two module resolution strategies Classic and Node

Today’s topic is TS, the most common declaration merge in TS: interface merge

The body of the

Before we talk about interface merging, let’s talk about declarative merging

A statement to merge

What is a declarative merge

In TS, declaration merge means that the compiler merges declarations of the same name into a single declaration

Result of merger

The merged declaration has the same features as the original two or more declarations

doubt

What exactly do these two or more refer to?

The simplest and most common type of declarative merge is interface merge

Combined interface

We just said, “The merged declaration will have the features of two or more of the original declarations.”

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

It is important to note that the members of the interface can be function members and non-function members

Nonfunction member

Such as:

interface Box {
    height: number;
}

interface Box {
    width: number;
}

let box: Box = {height: 2.width: 3};
Copy the code

In the above code, you define two interfaces with the same name as Box (in real development, they might come from different files), and eventually the contents will be mixed together

Note, however, that the members in each of the above cases are unique, but the compiler will report an error if both interfaces declare non-function members of the same name and their types are different

Members of the function

Each function declaration with the same name is treated as an overload of that function for its members. And when interface A is merged with subsequent interface A, the latter interface has higher priority

Take 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;
}
Copy the code

This will eventually be merged into a single statement, as follows

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

Two points to note:

  1. The order of declarations in each set of joints remains the same
  2. The order between each group of interfaces is that later interface overloads appear at the front

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

END

That’s all for this article. If you have any questions, please point out