In Typescript, Although intersection and union types are similar, they are employed in completely different ways. An intersection type is a type that merges several kinds into one. This allows you to combine many types to create a single type with all of the properties that you require. An object of this type will have members from all of the types given. The ‘&’ operator is used to create the intersection type.
Example 1: Creating an intersected type: In this example, two interfaces named student and teacher are created. Intersected type is created by using ‘&’ between student and teacher. Intersected type contains all the properties of the two interfaces. An obj of intersection type is created and values are retrieved from it. We can not use a property without assigning it to the intersection type object.
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); |
Output:
7873 rita
Example 2: In this example, we create two interfaces A and B, in which there are two properties named ‘feauA’ and ‘feauB’. But the type of feauA isn’t the same in both the interfaces, when we try to assign a value 20 to feauA typescript compiler raises an error as the intersection type is of the type ‘string & number’. If we try to assign a string to feauA, the error is not raised as to when intersected the type is 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); |
Output:
error TS2322: Type 'number' is not assignable to type 'never'. obj1.feauA = 20; // Error, Type '20' is not assignable // to type 'string & number'
Example 3: Intersection types are commutative and associative: The order of the intersection doesn’t matter when we intersect two or more types. Even if the order of intersection changes the type of the intersected objects are the same, the ‘typeof’ operator is used to check that, the properties of the intersected objects are also the same.Â
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 |
Output:
height length false true true
Reference: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types
