¿Qué son los tipos de intersección en Typescript?

En Typescript , aunque los tipos de intersección y unión son similares, se emplean de formas completamente diferentes. Un tipo de intersección es un tipo que fusiona varios tipos en uno. Esto le permite combinar muchos tipos para crear un solo tipo con todas las propiedades que necesita. Un objeto de este tipo tendrá miembros de todos los tipos dados. El operador ‘&’ se utiliza para crear el tipo de intersección.

Ejemplo 1: creación de un tipo intersectado: en este ejemplo, se crean dos interfaces denominadas alumno y profesor. El tipo intersectado se crea usando ‘&’ entre estudiante y profesor. El tipo intersectado contiene todas las propiedades de las dos interfaces. Se crea un obj de tipo intersección y se recuperan valores de él. No podemos usar una propiedad sin asignarla al objeto de tipo intersección.

Javascript

interface Student {
  student_id: number;
  name: string;
}
  
interface Teacher {
  Teacher_Id: number;
  teacher_name: string;
}
  
type intersected_type = Student & Teacher;
  
let obj1: intersected_type = {
  student_id: 3232,
  name: "rita",
  Teacher_Id: 7873,
  teacher_name: "seema",
};
  
console.log(obj1.Teacher_Id);
console.log(obj1.name);

Producción:

7873
rita

Ejemplo 2: En este ejemplo, creamos dos interfaces A y B, en las que hay dos propiedades denominadas ‘feauA’ y ‘feauB’. Pero el tipo de feauA no es el mismo en ambas interfaces, cuando intentamos asignar un valor 20 a feauA, el compilador TypeScript genera un error ya que el tipo de intersección es del tipo ‘string y número’. Si tratamos de asignar una string a feauA, el error no se genera cuando se intersecta, el tipo es String.

Javascript

interface A {
  feauA: string;
  feauB: string;
}
  
interface B {
  feauA: number;
  feauB: string;
}
  
type AB = A & B;
  
  
let obj1: AB;
let obj2: AB;
  
// Error, Type '20' is not assignable
// to type 'string & number'
obj1.feauA = 20; 
console.log(obj1.feauA);
  
obj2.feauB = "c";
console.log(obj2.feauB);

Producción:

error TS2322: Type 'number' is not assignable to type 'never'.
obj1.feauA = 20; 
// Error, Type '20' is not assignable
// to type 'string & number'

Ejemplo 3: Los tipos de intersección son conmutativos y asociativos: El orden de la intersección no importa cuando intersectamos dos o más tipos. Incluso si el orden de la intersección cambia, el tipo de los objetos intersecados es el mismo, el operador ‘typeof’ se utiliza para comprobar que las propiedades de los objetos intersecados también son las mismas. 

commutative property:  A&B = B&A
associative property: (A&B)&C = A&(B&C)

Javascript

interface A {
  prop1: String;
}
  
interface B {
  prop2: String;
}
  
interface C {
  prop3: String;
}
  
let obj1: A & B = { prop1: "length", prop2: "width" };
let obj2: B & A = { prop1: "length", prop2: "width" };
let obj3: A & (B & C) = { prop1: "", prop2: "", prop3: "" };
let obj4: (A & B) & C = { prop1: "", prop2: "", prop3: "" };
  
obj3.prop3 = "height";
console.log(obj3.prop3);
  
obj4.prop1 = "length";
console.log(obj4.prop1);
  
console.log(obj3 == obj4); // false
console.log(typeof obj3 == typeof obj4); // true
console.log(typeof obj1 == typeof obj2); // true

Producción:

height
length
false
true
true

Referencia: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types

Publicación traducida automáticamente

Artículo escrito por isitapol2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *