ChatGPT解决这个技术问题 Extra ChatGPT

What does the pipe(|) mean in typescript?

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?


A
Aleksey L.

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.


So given something, how do I know which specific type of object it currently holds? I wish this answer tried to answer that as well.
@Nawaz you can use type guards. In case of primitives it can be typeof, in case of classes instanceof. Or it can be user defined type guard. Depends on specific case. More info here typescriptlang.org/docs/handbook/…
Looks like that union handbook link is now deprecated and the "go to the new page" button there doesn't go anywhere useful. You might want to change it to this link
+1 -- TypeScript supports algabraic data types. If you're from an OOP background these are probably new to you, and can be very powerful. At a high level they are language features that support composition rather than inheritance. This makes it very easy to express models that don't fit inheritance well. The book "Domain Driven Design in Functional Programming" is a personal favorite for examples--I highly recommend it to anyone working with TS or F#.
c
cham

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

in JS double pipeline is a logical OR, single pipeline is a bitwise operator OR.
Also, it only seems to work with primitives, because thing: One | Two where both types are an interface with different properties, it will merge (union?) them, and complain that neither match eachothers properties. That won't work with primitives, because i cant just merge an object with boolean or something
A
Apoorv

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