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?
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'
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
.
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
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
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
Success story sharing
something
, how do I know which specific type of object it currently holds? I wish this answer tried to answer that as well.typeof
, in case of classesinstanceof
. Or it can be user defined type guard. Depends on specific case. More info here typescriptlang.org/docs/handbook/…