¿Qué es la fusión de declaraciones en TypeScript?

En Typescript , el término «fusión de declaraciones» se refiere al compilador que combina dos declaraciones con el mismo nombre en una sola definición. Ambas declaraciones iniciales están presentes en esta definición combinada. Es posible fusionar interfaces , espacios de nombres y enumeraciones , etc., pero las clases no se pueden fusionar.

Interfaz con fusión de interfaz: en este ejemplo, se declaran 3 interfaces con el mismo nombre ‘Estudiante’, por lo que todas las interfaces se fusionan. la clase Student1 implementa la interfaz fusionada, tiene las propiedades de las tres interfaces.

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);

Producción:

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

En este ejemplo, el mismo nombre de propiedad se repite en las interfaces, pero se cambia el tipo de datos. en la primera interfaz, la identificación de la propiedad tiene el tipo ‘número’, en la segunda interfaz tiene el tipo ‘string’. El compilador de TypeScript genera un error que dice «La propiedad ‘id’ debe ser del tipo ‘número’, pero aquí tiene el tipo ‘string'». aquí las propiedades no se refieren a ‘funciones’.

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;
}

Producción:

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.

¿Qué sucede si las interfaces tienen funciones declaradas con el mismo nombre pero los tipos de argumentos son diferentes? Cuando los componentes en las interfaces combinadas son funciones con el mismo nombre, están sobrecargados, lo que significa que se llamará a la función relevante según el tipo de entrada proporcionada.

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));

Producción:

AD54
54

Cuando se combinan o fusionan interfaces con la misma firma, las funciones que se declaran en las interfaces creadas recientemente aparecen en la parte superior de la interfaz fusionada, mientras que las funciones de las interfaces creadas anteriormente aparecen debajo.

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);
}

Producción:

Con el resto de la teoría siendo la misma, hay una excepción. Las funciones con tipos de literales de string tienen mayor prioridad y, por lo tanto, aparecen primero.

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);
}

Producción: