Union Types ('|')

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 31 of 73.

Sometimes you need a variable that can hold different types of values depending on the situation. For example, a user ID might be stored as either a string like "user123" or a number like 42. TypeScript's union types solve this problem by allowing a variable to be one of several specified types.

Union types use the pipe character (|) to combine multiple types. The syntax reads naturally as "this OR that":

let userId: string | number;

userId = "user123";  // Valid - string
userId = 42;         // Valid - number
userId = true;       // Error - boolean not allowed

You can combine any types in a union, not just primitives. This flexibility makes union types particularly useful for function parameters that need to accept multiple input formats:

function displayMessage(content: string | number): void {
  console.log("Message: " + content);
}

displayMessage("Hello!");  // Works with string
displayMessage(404);       // Works with number

Union types provide type safety while maintaining flexibility - TypeScript ensures you only use values that match one of the specified types, preventing runtime errors from unexpected data types.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a function named printId that accepts a parameter called id of type string | number and prints it to the console. The function should have an explicit return type of void.

Create another function named processValue that accepts a parameter called data of type boolean | string and returns it unchanged. The function should have an explicit return type of boolean | string.

Create a third function named formatOutput that accepts a parameter called input of type number | string and returns a formatted string. If the input is a number, return "Number: [input]". If the input is a string, return "Text: [input]". The function should have an explicit return type of string.

The following inputs will be provided:

First input: a value that can be either a string or number (for printId)
Second input: a value that can be either a boolean or string (for processValue)
Third input: a value that can be either a number or string (for formatOutput)

Read the three inputs, call each function with the appropriate input, and handle the outputs as follows:

Call printId with the first input (this will print directly)
Call processValue with the second input and print the returned value
Call formatOutput with the third input and print the returned value

Note: The first input will be provided as a string, but if it represents a number (like "123"), convert it to a number before passing it to printId. The second input will be provided as a string, but if it's "true" or "false", convert it to the corresponding boolean value. The third input will be provided as a string, but if it represents a number, convert it to a number.

Cheat sheet

Union types allow a variable to be one of several specified types using the pipe character (|):

let userId: string | number;

userId = "user123";  // Valid - string
userId = 42;         // Valid - number
userId = true;       // Error - boolean not allowed

Union types work with function parameters to accept multiple input formats:

function displayMessage(content: string | number): void {
  console.log("Message: " + content);
}

displayMessage("Hello!");  // Works with string
displayMessage(404);       // Works with number

Union types provide type safety while maintaining flexibility, ensuring you only use values that match one of the specified types.

Try it yourself

import * as fs from "fs";

// Read inputs
const stdinBuffer: Buffer = fs.readFileSync(0);
const inputs: string[] = stdinBuffer.toString().trim().split('\n');
const input1 = inputs[0];
const input2 = inputs[1];
const input3 = inputs[2];

// Convert inputs to appropriate types
const firstInput = isNaN(Number(input1)) ? input1 : Number(input1);
const secondInput = input2 === "true" ? true : input2 === "false" ? false : input2;
const thirdInput = isNaN(Number(input3)) ? input3 : Number(input3);

// TODO: Write your code here
// Create the three functions: printId, processValue, and formatOutput

// TODO: Call the functions with the appropriate inputs and handle outputs

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Union Types ('|')

Cheat sheet

All lessons in Introduction To TypeScript