TypeScript union Type

Introduction

In this chapter, we will explore the union type in TypeScript. Union types allow you to define a variable that can hold one of several types. This is useful for handling values that can be of different types in different scenarios. Understanding how to use union types is essential for writing flexible and type-safe TypeScript programs.

Table of Contents

2. Definition
3. Union Type Syntax
4. Using Union Types
5. Type Guards
6. Union Types in Functions
7. Complete Example with Output
8. Conclusion

Definition

A union type in TypeScript allows you to specify a variable that can hold one of several types. This is done by using the pipe (|) symbol between the types. Union types are useful when a value can be of different types in different scenarios.

Union Type Syntax

Syntax

let variableName: type1 | type2 | ... = value;

Example

let value: string | number = "Hello";
console.log(value);

value = 42;
console.log(value);

Output

Hello
42

Using Union Types

Union types can be used with variables, function parameters, and return types. This allows for more flexible and type-safe code.

Example

function printValue(value: string | number): void {
  console.log(`The value is ${value}`);
}

printValue("Hello, TypeScript!"); // Output: The value is Hello, TypeScript!
printValue(100); // Output: The value is 100

Output

The value is Hello, TypeScript!
The value is 100

Type Guards

Type guards allow you to narrow down the type of a union type variable within a specific block of code. This is useful for performing different operations based on the type of the value.

Example

function printLength(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String length: ${value.length}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printLength("Hello, TypeScript!"); // Output: String length: 17
printLength(100); // Output: Number value: 100

Output

String length: 17
Number value: 100

Union Types in Functions

Union types can be used in function parameters and return types to handle values of different types in a type-safe manner.

Example

function combine(input1: string | number, input2: string | number): string | number {
  if (typeof input1 === "string" || typeof input2 === "string") {
    return input1.toString() + input2.toString();
  }
  return input1 + input2;
}

console.log(combine("Hello, ", "TypeScript!")); // Output: Hello, TypeScript!
console.log(combine(10, 20)); // Output: 30
console.log(combine("The answer is ", 42)); // Output: The answer is 42

Output

Hello, TypeScript!
30
The answer is 42

Complete Example with Output

In this section, we will combine all the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.

TypeScript Code

You can test the following code in the TypeScript Playground.

// Using Union Types
let value: string | number = "Hello";
console.log(value); // Output: Hello

value = 42;
console.log(value); // Output: 42

// Union Types in Functions
function printValue(value: string | number): void {
  console.log(`The value is ${value}`);
}

printValue("Hello, TypeScript!"); // Output: The value is Hello, TypeScript!
printValue(100); // Output: The value is 100

// Type Guards
function printLength(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String length: ${value.length}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printLength("Hello, TypeScript!"); // Output: String length: 17
printLength(100); // Output: Number value: 100

// Union Types in Functions with Return Types
function combine(input1: string | number, input2: string | number): string | number {
  if (typeof input1 === "string" || typeof input2 === "string") {
    return input1.toString() + input2.toString();
  }
  return input1 + input2;
}

console.log(combine("Hello, ", "TypeScript!")); // Output: Hello, TypeScript!
console.log(combine(10, 20)); // Output: 30
console.log(combine("The answer is ", 42)); // Output: The answer is 42

Conclusion

In this chapter, we covered the union type in TypeScript, including how to use it to define variables, function parameters, and return types that can hold one of several types. We also explored type guards and how to use them to narrow down the type of a union type variable.