TypeScript Object Intersection Types
In TypeScript, Object Intersection Types are a way to create new types by combining multiple types into a single type. This is done using the & (ampersand) operator. Intersection types allow you to express that an object must have all the properties and methods of each type in the intersection. This is similar to taking the intersection of sets in mathematics.
Syntax
type TypeA = { propA: number; methodA: () => void; }; type TypeB = { propB: string; methodB: () => void; }; type CombinedType = TypeA & TypeB;
Parameters
- TypeA: This is an object type with a propA property (number) and a methodA method (a function).
- TypeB: This is another object type with a propB property (string) and a methodB method.
- CombinedType: This is an intersection type created by using TypeA & TypeB, which means an object of CombinedType must have all the properties and methods of both TypeA and TypeB.
Example 1: In this example, We define two object types, Dog and Bird, each with their own set of properties and methods. We create an intersection type HybridAnimal by combining Dog and Bird using the & operator. This means an object of the type HybridAnimal must have properties and methods from both a Dog and a Bird. We then create an object hybridPet of type HybridAnimal. It includes properties like name, breed, and wingspan, as well as methods like bark and fly. Finally, we access properties and call methods on hybridPet, demonstrating that it satisfies the requirements of both Dog and Bird types.
Javascript
// Define two object types type Dog = { name: string; breed: string; bark: () => void; }; type Bird = { name: string; wingspan: number; fly: () => void; }; // Create an intersection type type HybridAnimal = Dog & Bird; // Create an object of the intersection type const hybridPet: HybridAnimal = { name: "Griffin" , breed: "Labrador" , wingspan: 1.2, bark: () => console.log( "Woof!" ), fly: () => console.log( "Flap, flap!" ), }; // Access properties and methods console.log(hybridPet.name); console.log(hybridPet.wingspan); hybridPet.bark(); hybridPet.fly(); |
Output:
Griffin 1.2 Woof! Flap, flap!
Example 2: In this example, We define two interfaces, Printable and Loggable, each with its own set of methods. We create an intersection type PrintableAndLoggable by combining Printable and Loggable using the & operator. This means an object of type PrintableAndLoggable must have both the print and log methods. We then create an object loggerAndPrinter of type PrintableAndLoggable. It includes both the print and log methods. Finally, we access and call the print and log methods on loggerAndPrinter, demonstrating that it satisfies the requirements of both Printable and Loggable interfaces.
Javascript
// Define two interfaces interface Printable { print: () => void; } interface Loggable { log: (message: string) => void; } // Create an intersection type type PrintableAndLoggable = Printable & Loggable; // Create an object of the intersection type const loggerAndPrinter: PrintableAndLoggable = { print: () => console.log( "Printing..." ), log: (message) => console.log(`Logging: ${message}`), }; loggerAndPrinter.print(); loggerAndPrinter.log( "Hello, w3wiki!" ); |
Output:
Printing... Logging: Hello, w3wiki!
Reference: https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types