¿Qué significa el símbolo de tubería (|) en Typescript?

En Typescript , la tubería (|) se conoce como un tipo de unión o «O». también se le llama tipo de unión en TypeScript. Un valor que puede ser de varios tipos se describe mediante un tipo de unión. Cada tipo está separado por una tubería (|), por lo que el número| string representa un valor cuyo tipo puede ser una string o un número. o podemos decir que cualquiera de los tipos especificados está permitido.

Ejemplo 1: asignamos una variable y luego usamos tubería (|) o tipo de unión que dice que la variable puede ser de tipo string, bool o número. Estos tipos se conocen como miembros del sindicato. 

// 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);

Producción:

20
geeks
true

¿Qué ocurre si disponemos de una variable de algún otro tipo? En el siguiente código, intentamos asignar una función a la variable y genera un error ya que la variable solo puede ser de tipo string, número o booleano.

variable = function () {};

error TS2322: el tipo ‘() => void’ no se puede asignar al tipo ‘string | número | booleano’.
El tipo ‘() => void’ no se puede asignar al tipo ‘true’.

Ejemplo 2: Función que usa el operador (|).

En el siguiente ejemplo, creamos una función y definimos un tipo de unión que toma una string o un número. 

function Result(marks: number | string) {
  console.log("You scored " + marks + " in math");
}
// Passing a number
Result(99);
  
// Passing a string
Result("98");

Producción:

You scored 99 in math
You scored 98 in math

Cuando pasamos un valor de tipo booleano, da error ya que nuestra función puede tomar un parámetro que es de tipo numérico o de string. 

function Result(marks: number | string) {
  console.log("You scored " + marks + " in math");
}
  
// Passing a boolean type
Result(true);

Producción:

error TS2345: el argumento de tipo ‘booleano’ no se puede asignar al parámetro de tipo ‘string | número’.

Ejemplo 3: Uso de operaciones asociadas con un solo tipo

TypeScript solo permitirá que se realice una operación si es válida para todos los miembros de la unión. en el siguiente ejemplo, substr() es la operación solo en strings y no en números, por lo que genera un error.

function Result(marks: number | string) {
  console.log("You scored " + marks + " in math");
  console.log(marks.substr(0, 1));
}

Producción:

error TS2339: Property 'substr' does not exist on type 'string | number'.
Property 'substr' does not exist on type 'number'.

Si queremos usar operaciones solo en un tipo específico, debemos reducir la unión al proporcionar una condición que funcione solo en un tipo específico. ej: en el siguiente código usamos typeof para estrechar la unión.

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");

Producción:

You scored 98 in math
9