Codecademy Logo

Union Types

TypeScript Union Type

TypeScript allows a flexible type called any that can be assigned to a variable whose type is not specific. On the other hand, TypeScript allows you to combine specific types together as a union type.

let answer: any; // any type let typedAnswer: string | number; // union type

TypeScript Union Type Syntax

TypeScript lets you create a union type that is a composite of selected types separated by a vertical bar, |.

let myBoolean: string | boolean; myBoolean = 'TRUE'; // string type myBoolean = false; // boolean type

TypeScript Union Type Narrowing

Since a variable of a union type can assume one of several different types, you can help TypeScript infer the correct variable type using type narrowing. To narrow a variable to a specific type, implement a type guard. Use the typeof operator with the variable name and compare it with the type you expect for the variable.

const choices: [string, string] = ['NO', 'YES']; const processAnswer = (answer: number | boolean) => { if (typeof answer === 'number') { console.log(choices[answer]); } else if (typeof answer === 'boolean') { if (answer) { console.log(choices[1]); } else { console.log(choices[0]); } } } processAnswer(true); // Prints "YES" processAnswer(0); // Prints "NO"

TypeScript Function Return Union Type

TypeScript infers the return type of a function, hence, if a function returns more than one type of data, TypeScript will infer the return type to be a union of all the possible return types. If you wish to assign the function’s return value to a variable, type the variable as a union of expected return types.

const popStack = (stack: string[]) => { if (stack.length) { return stack[stack.length-1]; // return type is any } else { return null; // return type is null } }; let toys: string[] = ['Doll', 'Ball', 'Marbles']; let emptyBin: string[] = []; let item: string | null = popStack(toys); // item has union type console.log(item); // Prints "Marbles" item = popStack(emptyBin); console.log(item); // Prints null

TypeScript Union of Array Types

TypeScript allows you to declare a union of an array of different types. Remember to enclose the union in parentheses, (...), and append square brackets, [] after the closing parenthesis.

const removeDashes = (id: string | number) => { if (typeof id === 'string') { id = id.split('-').join(''); return parseInt(id); } else { return id; } } // This is a union of array types let ids: (number | string)[] = ['93-235-66', '89-528-92']; let newIds: (number | string)[] = []; for (let i=0; i < ids.length; i++) { newIds[i] = removeDashes(ids[i]); // Convert string id to number id } console.log(newIds); // Prints [9323566, 8952892]

TypeScript Union Type Common Property Access

As a result of supporting a union of multiple types, TypeScript allows you to access properties that are common among the member types without any error.

let element: string | number[] = 'Codecademy'; // The .length property is common for string and array console.log(element.length); // Prints 10 // The .match method only works for a string type console.log(element.match('my')); // Prints ["my"] element = [3, 5, 1]; // The length property is common for string and array console.log(element.length); // Prints 3 // The .match method will not work for an array type console.log(element.match(5)); // Error: Property 'match' does not exist on type 'number[]'.

TypeScript Union of Literal Types

You can declare a union type consisting of literal types, such as string literals, number literals or boolean literals. These will create union types that are more specific and have distinct states.

// This is a union of string literal types type RPS = 'rock' | 'paper' | 'scissors' ; const play = (choice: RPS): void => { console.log('You: ', choice); let result: string = ''; switch (choice) { case 'rock': result = 'paper'; break; case 'paper': result = 'scissors'; break; case 'scissors': result = 'rock'; break; } console.log('Me: ', result); } const number = Math.floor(Math.random()*3); let choices: [RPS, RPS, RPS] = ['rock', 'paper', 'scissors']; play(choices[number]);