In Typescript, pipe(|) is referred to as a union type or “Or”. it is also called union type in typescript. A value that can be any of numerous kinds is described by a union type. Each type is separated by a pipe (|), thus the number| string represents a value whose type can be a string or a number. or we can say either of the specified types is permissible.
Example 1: We assign a variable and then we use pipe(|) or union type that says the variable can be of type string, bool or number. These types are referred as union’s members.
Javascript
// Using (|) to define the variable // with multiple types let variable: string | boolean | number; variable = 20; console.log(variable); variable = "neveropen"; console.log(variable); variable = true; console.log(variable); |
Output:
20 neveropen true
What happens if we provide of a variable of some other type? In the below code we tried assigning a function to the variable and it raises an error as the variable can be only of string, number or boolean type.
Javascript
variable = function () {}; |
error TS2322: Type ‘() => void’ is not assignable to type ‘string | number | boolean’.
Type ‘() => void’ is not assignable to type ‘true’.
Example 2: Function that uses (|) operator.
In the below example we created a function and we defined a union type that either takes a string or a number.
Javascript
function Result(marks: number | string) { console.log("You scored " + marks + " in math"); } // Passing a number Result(99); // Passing a string Result("98"); |
Output:
You scored 99 in math You scored 98 in math
When we passed in a boolean type value it gives error as our function can take a parameter which is either number type or string type.
Javascript
function Result(marks: number | string) { console.log("You scored " + marks + " in math"); } // Passing a boolean type Result(true); |
Output:
error TS2345: Argument of type ‘boolean’ is not assignable to parameter of type ‘string | number’.
Example 3: Using operations associated with only one type
TypeScript will only let an operation to be performed if it is valid for all union members. in the below example substr() is the operation only on strings and not numbers so it raises an error.
Javascript
function Result(marks: number | string) { console.log("You scored " + marks + " in math"); console.log(marks.substr(0, 1)); } |
Output:
error TS2339: Property 'substr' does not exist on type 'string | number'. Property 'substr' does not exist on type 'number'.
If we want to use operations only on a specific type then we need to narrow the union by providing a condition that works only on a specific type. ex: in the below code we used typeof for narrowing the union.
Javascript
function Result(marks: number | string) { console.log("You scored " + marks + " in math"); if (typeof marks == "string") { console.log(marks.substr(0, 1)); } } // Function call Result("98"); |
Output:
You scored 98 in math 9
