什么是 Typescript 中的声明合并？

在 Typescript 中，术语“声明合并”是指编译器将两个同名的声明组合成一个定义。两个初始声明都出现在这个组合定义中。可以合并接口、命名空间和枚举等，但不能合并类。

Interface with Interface Merging：在这个例子中，3个接口被声明为同名'Student'，所以所有的接口都被合并了。 Student1 类实现了合并的接口，它具有所有三个接口的属性。

Javascript

interface Student {
    id: number;
}
  
interface Student {
    name: string;
}
  
interface Student {
    branch: string;
}
  
class Student1 implements Student {
    id = 56545;
    name = "sarah";
    branch = "CSE";
}
  
const student = new Student1();
console.log(student);

输出：

Student1 { id: 56545, name: 'sarah', branch: 'CSE' }

在此示例中，接口中重复了相同的属性名称，但更改了数据类型。在第一个接口中，属性 id 的类型为“number”，在第二个接口中，它的类型为“字符串”。打字稿编译器引发错误说“属性'id'必须是'数字'类型，但这里有'字符串'类型”。这里的属性不是指“功能”。

Javascript

interface Student {
    id: number;
}
  
interface Student {
    // error: Subsequent property declarations
    // must have the same type. 
    // Property 'id' must be of type 'number', 
    // but here has type 'string'.
    id: string;
    name: string;
}
  
interface  Student {
    branch: string;
}

输出：

error TS2717: Subsequent property declarations must have the same type.
Property 'id' must be of type 'number', but here has type 'string'.
      id: string;
      ~~
  two.ts:252:3
          id: number;
          ~~
    'id' was also declared here.

如果接口具有以相同名称声明但参数类型不同的函数怎么办？当合并的接口中的组件是同名函数时，它们是重载的，这意味着将根据给定的输入类型调用相关函数。

Javascript

interface Student {
    displayId(id: number);
}
  
interface Student {
    displayId(id: string);
}
  
const student: Student = {
    displayId(id) {
        return id;
    },
};
  
console.log(student.displayId("AD54"));
console.log(student.displayId(54));

输出：

AD54
54

当具有相同签名的接口被合并或合并时，最近创建的接口中声明的函数出现在合并后的接口的顶部，而之前创建的接口中的函数出现在下面。

Javascript

interface Student {
  displayId(id: number);
}
  
interface Student {
  displayId(id: string);
}
# precedence in the merged interface 
# merged interface
interface Student {
  displayId(id: string);
  displayId(id: number);
}

输出：

其余理论相同，但有一个例外。具有字符串字面量类型的函数具有更高的优先级，因此首先出现。

Javascript

interface Student {
    displayId(id: number);
}
  
interface Student {
    displayId(id: string);
    displayId(id: "AC612");
}
interface Student {
    displayId(id: "AD645");
}
  
# Precedence in the merged interface 
# merged interface
interface Student{
    displayId(id: "AC612");
    displayId(id: "AD645");
    displayId(id: string);
    displayId(id: number);
}

输出：