Union and Intersection Types in TypeScript

Introduction

TypeScript, a strongly-typed superset of JavaScript, brings robust type-checking capabilities to JavaScript development. These capabilities help developers catch errors early and write more maintainable code. Among the powerful features of TypeScript are Union Types and Intersection Types. These types provide flexibility and precision in defining complex types, which can be crucial for large-scale applications.

The goal of this article is to explain the concepts of union and intersection types in TypeScript. We will dive into an example to illustrate how these types can be combined to create a more expressive type definition. By the end of this article, you should have a solid understanding of how to use these types effectively in your TypeScript projects.

Okay, without further ado, let’s dive in.

Case Study

I have this meme below.

https://www.picturepunches.com/meme/317642

There’s an unspoken rule in the art of conversation: never ask a woman her age and never ask a man his salary. But let’s raise the stakes and make this more intriguing. Imagine a third rule: never ask a coder their unfinished project count. Some secrets are best left in the shadows—because whether it’s age, earnings, or abandoned side projects, the answers often come with stories you may not be ready to hear.

OK, let’s focus on the first two items: man and woman.

	Dont ask 1	Dont ask 2	Should ask 1	Should ask 2
Man	Salary	Relationship	Address	Full name
Woman	Age	Weight	Address	Full name

In TypeScript we could made the type like this:

type Person = {
    gender: 'man' | 'woman',
    dontAsk: 'salary' | 'relationship' | 'age' | 'weight'
};

The problem here if we create an object based on the Person type

const person1: Person = {
    gender: 'man',
    dontAsk: 'weight',
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'salary',
};

Both two objects above will not showing any type error.

Intersection and Union types come to solve this problem.

Union Types

A Union Type allows a variable to be one of several types. In our example:

{
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'size'
}

This part of the type definition states that a Person can be one of two shapes:

1. An object with gender: 'man' and dontAsk being either 'salary' or 'relationship'.
2. An object with gender: 'woman' and dontAsk being either 'weight' or 'age'.

This flexibility is useful when dealing with data that can take multiple forms.

Intersection Types

An Intersection Type combines multiple types into one. A variable of an intersection type must satisfy all the constituent types. In our example:

& {
    address?: string,
    fullName: string
}

This part of the type definition states that a Person must have:

• An optional address property of type string.
• A required fullName property of type string.

Combining Union and Intersection Types

The complete Person type combines both union and intersection types:

type Person = ({
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'age'
}) & {
    address?: string,
    fullName: string
};

A Person object must match one of the union types and must also include the properties defined in the intersection type. Here are some valid Person objects:

const person1: Person = {
    gender: 'man',
    dontAsk: 'salary',
    fullName: 'John Doe'
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'weight',
    fullName: 'Jane Doe',
    address: '123 Main St'
};

If define person1 don’t ask to age it shows error. In Visual Studio Code which has built in support for TypeScript, it will shows error when we are hovering the object.

Summary

In TypeScript, Union Types allow a variable to be one of several types, while Intersection Types combine multiple types into one. By understanding and using these types, you can write more flexible and robust TypeScript code. The Person type example illustrates how to combine these concepts to create complex and precise type definitions.

Using TypeScript effectively can significantly improve code maintainability. When a new developer joins your team, clear type definitions reduce the need for lengthy explanations. Instead of deciphering code, the team can focus on discussing the project's flow and goals, boosting productivity and collaboration.