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 number | string | boolean 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

Answer 3

Anytime that we use an OR operator on an argument, here's what is happening behind the scenes on that operation to limit the number of properties that we can actually reference on unmatchable. So any time we use this or operator type script is going to take a look at the two different types and it's going to say you can only refer to properties on that argument if they exist in both of these different types.

class Test1 {
    public a: string|undefined;
    public b: string|undefined
}

class Test2 {
    public b: string|undefined
}

let x:  Test1 |  Test2 ;
x= new Test1();
x.a    //compilation error :Property 'a' does not exist on type 'Test1 | Test2'. Property 'a' does not exist on type 'Test2'.
x.b    //ok
x= new Test2();
x.a    //compilation error :Property 'a' does not exist on type 'Test2'..
x.b    // ok