Union and Intersection Types in TypeScript

Author :- Md Saiful Islam
Date :- 30/11/2024
Reading Time :- 6 min
Union and Intersection types are important features in TypeScript that help ensure type safety in your code.
Union Types
In TypeScript, a union type allows a variable to hold one of several specified types or values. It’s like saying, “This variable can be either one type or another.” This can be especially useful when you want a variable to be limited to a specific set of allowed values, which helps improve type safety in your code. Here's an example of a function that uses a union type:
Basic Union Types
type PhoneNumberType = number | string;
const phoneNumber: PhoneNumberType = +883923983434; // Valid
const phoneNumber2: PhoneNumberType = '+883923983434'; // Valid
Union with Literal Types
type AnimalType = "dog" | "cat" | "elephant";
const animalType: AnimalType = "dog"; // Valid
const animalType2: AnimalType = "cat"; // Valid
const animalType3: AnimalType = "elephant"; // Valid
const animalType4: AnimalType = "bird"; // Invalid (Type 'bird' is not assignable to type 'AnimalType')
Significance of Union Types:
- Flexibility: Allows a variable to represent multiple types, enabling broader use cases.
- Type Safety: Enforces type constraints at compile-time, reducing runtime errors by ensuring only valid types are used.
Intersection Types
Intersection types, on the other hand, enable the combination of multiple types into a single type. This feature is beneficial when we want an object to have the characteristics of multiple types.
Basic Intersection Types
interface Person { name: string; age: number }; interface Employee { department: string; salary: number };
type FullPerson = Person & Employee;
const Saiful: FullPerson = { name: 'Md Saiful Islam', age: 22, department: 'Web developer', salary: 5000 }; // Valid
Intersection with Literal Types
type Animal = { species: "dog" | "cat" | "elephant" };
type Dog = Animal & { barks: true }; type Cat = Animal & { meows: true };
const dog: Dog = { species: 'dog', barks: true }; // Valid const cat: Cat = { species: 'cat', meows: true }; // Valid
Intersection with Union Types
type PhoneNumberType = number | string; type FullNameType = { firstName: string; lastName: string };
type User = FullNameType & { phoneNumber: PhoneNumberType };
const user: User = { firstName: 'Md Saiful', lastName: 'Islam', phoneNumber: +883923983434}; // Valid
Significance of Intersection Types:
- Combining Multiple Types: Useful for scenarios where an object must conform to multiple type interfaces.
- Enhances Composition: Enables modular type definitions, making it easy to compose complex types from simpler ones.