What does the pipe(|) mean in typescript?

Solution 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.

Solution 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