Skip to content
Related Articles

Related Articles

What does the mean of pipe (|) symbol in Typescript ?

View Discussion
Improve Article
Save Article
  • Last Updated : 17 Feb, 2022
View Discussion
Improve Article
Save Article

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 = "geeks";
console.log(variable);
  
variable = true;
console.log(variable);


Output:

20
geeks
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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!