Working with Union Types in TypeScript

Working with Union Types in TypeScript

TypeScript is a typed language, meaning variables and function parameters must have an explicit type defined. This is great for ensuring code is stable and bug-free, but it also adds a layer of complexity when code needs to handle multiple types. Fortunately, union types can help make this complexity much easier to manage.

What are Union Types?

Union types allow you to define a variable or parameter that can hold multiple different types. For example, if you are writing a function that takes in a number or string, you can define the parameter as a union type:

    function doSomething(param: number | string) {
        ...
    }

The syntax for defining a union type is to use the pipe symbol (|) between each type. So in the above example, the parameter can be either a number or a string.

Using Union Types

When using union types, there are a few things to keep in mind. First, keep in mind that a union type will combine all the types into one union type. That means you cannot have a union type of both a string and an array - it will just be a union type of string.

Second, you cannot use the spread operator (...) with union types. This is because a union type is not an iterable type and the spread operator only works with iterable types.

Finally, you should be aware of type narrowing. Type narrowing is the process of narrowing down a union type into a single type based on some condition. This is a powerful tool that allows you to write more concise and maintainable code. For example, if you have a union type of both a number and a string, you can use type narrowing to check which type the value is and act accordingly:

    function doSomething(param: number | string) {
        if(typeof param === 'number') {
            // do something with the number
        } else {
            // do something with the string
        }
    }

By using type narrowing, you can write more succinct code that is easier to read and maintain.

Conclusion

Union types are a great way to handle multiple types in TypeScript. They provide a way to combine multiple types into one, simplify type checking, and reduce the amount of code needed. If you need to work with multiple types in TypeScript, then union types are a must.