Declaration merge: The TS compiler combines multiple declarations with the same name into a single declaration. The combined declaration has the characteristics of multiple declarations simultaneously.

In TS, interfaces and namespaces can be declared multiple times (declaring interfaces or namespaces with the same name).

1. Merge interfaces with the same name

interface InfoInter {
  name: string;
}
interface InfoInter {
  age: number;
}
Copy the code

Above we defined two interfaces with the same name. Next we define a variable, specifying that the variable type is InfoInter

let infoInter: InfoInter = { // Error
  name: 'dylan'};Copy the code

At this time, we can see that there is an error state, because the age attribute is missing in our parameter, the specific error content is as follows:

Type "{name: string; The attribute "age" is missing in "}", but is required in type "InfoInter".

So we need to fill in the age property:

let infoInter: InfoInter = {
  name: 'dylan'.age: 18
};
Copy the code

All declarations in TS, taken together, create one of three entities: namespace, type, and value

When you create a namespace, you actually create an object whose properties are exported from the namespace.

A type declaration creates a type and assigns it a name.

The declaration of a value creates a value in TS that can be used.

  • Namespace: indicates the Namespace
  • Class: type and value
  • Enum: Type and value
  • Type of Interface:
  • Type Alias Type Alias: indicates the Type
  • Values of the Function:
  • Value of Variable:
  • Non-function members of multiple interface definitions with the same name should be named identically. If repeated, the type should be the same, otherwise an error will be reported.
interface InfoInter {
  name: string;
}
interface InfoInter {
  name: number; // Error: Subsequent attribute declarations must be of the same type. The attribute "name" must be of type "string", but here it is of type "number".
}
Copy the code

As you can see from the above code, non-function member names in the same interface need to be of the same type if they are repeated.

  • For function members, each function member with the same name is treated as an overload of the function, and the following interface has higher priority when merged
interface InfoInter {
  name: string;
  getRes(input: string) :number;
}
interface InfoInter {
  age: number;
  getRes(input: number) :string;
}
let infoInter: InfoInter = {
  name: 'dylan'.age: 18,
  getRes(text: any) :any {
    if(typeof text === 'string') { return text.length; }
    else { return String(text); }}};Copy the code

Merge namespaces of the same name

A namespace with the same name merges the content exported from multiple namespaces.

namespace Validations {
  export const checkNumber = () = > {};
}
namespace Validations {
  export const checkLetter = () = > {};
}
Copy the code

Defining the above two namespaces is equivalent to the following code:

namespace Validations {
  export const checkNumber = () = > {};
  export const checkLetter = () = > {};
}
Copy the code

If we have something in one namespace that is not decorated with export, we cannot get it in the other namespace:

namespace Validations {
  const numberReg = / ^ [0-9] + $/;
  export const checkNumber = () = > {};
}
namespace Validations {
  console.log(numberReg); // Error: The name numberReg cannot be found.
  export const checkLetter = () = > {};
}
Copy the code

3. Merge namespaces and classes

Requirement: The class must come first.

The result of the merge is a class that contains static properties of the namespace exported.

class Validations {
  constructor() {}
  public checkType(){}}namespace Validations {
  export const numberReg = / ^ [0-9] + $/;
}
console.dir(Validations); // class method, where the static attribute has a numberReg
Copy the code

4. Merge namespaces and functions

Requirements: the function must come first.

In JS, functions are also objects, so you can assign attributes to a function.

function countUp() {
  countUp.count++;
}
namespace countUp {
  export let count = 0;
}
console.log(countUp.count); / / 0
countUp();
console.log(countUp.count); / / 1
Copy the code

5. Merge namespaces with enumeration

You can extend the content for enumerations by combining namespaces and enumerations.

The order of enums and namespaces is not required.

enum Colors {
  red,
  green,
  blue
}
namespace Colors {
  export const yellow = 3;
}
// Note: no 3: 'yellow'
console.log(Colors); // {0: 'red', 1: 'green', 2: 'blue', red: 0, green: 1, blue: 2, yellow: 3}
Copy the code

Summary: If you specify a field in an interface or namespace, you may find that you are missing a field that has not been specified before.

It may be that you define an interface or namespace with the same name somewhere else, causing them to merge.