Understanding Union Types in TypeScript

Understanding TypeScript Union Types

TypeScript is a powerful typed language that allows developers to write JavaScript that is more efficient and structured. One of the features offered by TypeScript is the use of union types, which provide the ability to specify multiple types in a single type declaration. In this post we'll explore what union types are and how they can be used.

What are Union Types?

Union types allow you to describe a value that can be one of two or more types. For example, a function might accept either a number or a string as an argument. In this case, you could declare the parameter as a union type:

function myFunc(param: number | string) { 
  // ... 
}

In this example, the `param` parameter can either be a number or a string. This means that when calling the function, you can pass either a number or a string and it will be accepted.

Using Union Types for Function Arguments

One of the most common uses for union types is for function arguments. By declaring a function's arguments as a union type, you ensure that any values passing through are of the correct type. This helps to prevent errors from occurring when calling the function.

For example, if you want to create a function that accepts either a number or a string, you can declare it using a union type as follows:

function myFunc(param: number | string) { 
  // ... 
}</pre

Now, when you call the function, you must pass either a number or a string – anything else will cause an error.

Using Union Types for Variable Declarations

Union types can also be used for variable declarations. This is useful if you need to describe a value that could be one of several types. For example, let's say you have a variable that can hold either a number or a string:

let myVar: number | string;

This tells TypeScript that the `myVar` variable can be either a number or a string. Now, if you try to assign an incompatible type to the variable (e.g. an array), you will get an error.

Conclusion

Union types are an incredibly useful feature of TypeScript that enable you to specify multiple types in a single type declaration. They're particularly useful for function arguments and variables, as they help to ensure that the values being passed through or stored are of the correct type.