Learn
Union Types
Unions and Arrays

Unions are even more powerful when used in combination with arrays.

For instance, we can represent time in TypeScript with a number or a string type. If we had a list of dates in both types, we’d need an array that allows for string and number values. Unions are here to help.

To create a union that supports multiple types for an array’s values, wrap the union in parentheses (string | number), then use array notation [].

const dateNumber = new Date().getTime(); // returns a number const dateString = new Date().toString(); // returns a string const timesList: (string | number)[] = [dateNumber, dateString];

Above, the timesList variable is typed to allow string and number types as values in its array. If we try to add a value to timesList that is not either type, like with timesList.push(true), TypeScript would display an error that boolean types are not allowed inside timesList.

One last thing: the parentheses are vitally important to type arrays correctly. If we left out the parentheses and wrote string | number[], that type would allow strings or arrays of only numbers.

Instructions

1.

Inspect the program in the editor. This program has a function that takes home addresses and their respective prices, formats them, then returns them. If you hover over the listings parameter in formatListings(), the type of listings is inferred as any. Let’s type this parameter.

Look at the definition of formatListings(), then define a union array type on the listings parameter.

2.

Run tsc in the terminal to make sure there are no type errors.

Folder Icon

Take this course for free

Already have an account?