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];
timesList variable is typed to allow
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
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.
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
tsc in the terminal to make sure there are no type errors.