What does the pipe(|) mean in typescript?

Question

While browsing some typescript code of @ng-bootstrap I have found pipe(|) operator.

export declare const NGB_PRECOMPILE: (typeof NgbAlert | typeof NgbTooltipWindow)[];

What is the use of pipe(|) operator in typescript?

Answer 1

This is called union type in typescript.

A union type describes a value that can be one of several types.

Pipe (|) is used to separate each type, so for example number | string | boolean is the type of a value that can be a number, a string, or a boolean.

let something: number | string | boolean;

something = 1; // ok
something = '1'; // ok
something = true; // ok
something = {}; // Error: Type '{}' is not assignable to type 'string | number | boolean'

Playground

---

And here's an example similar to one in the question:

class Test1 {
    public a: string
}

class Test2 {
    public b: string
}

class Test3 {
}

let x: (typeof Test1 | typeof Test2)[];

x = [Test1]; //ok
x = [Test1, Test2]; //ok
x = [Test3]; //compilation error

x is an array containing constructors of Test1 or Test2.

Answer 2

The pipe represents 'or'. So in this context it says that either of the declared types is allowed. Perhaps it is easy to understand a union with primitive types:

let x: (string | number);

x = 1; //ok
x = 'myString'; //ok
x = true; //compilation error for a boolean