Typescript 中的管道 (|) 符号是什么意思？

在 Typescript 中，管道（|）被称为联合类型或“或”。它在打字稿中也称为联合类型。可以是多种类型中的任何一种的值由联合类型描述。每种类型由竖线 (|) 分隔，因此数字 | 字符串表示一个值，其类型可以是字符串或数字。或者我们可以说任何一种指定的类型都是允许的。

示例 1：我们分配一个变量，然后我们使用 pipe(|) 或联合类型，表示该变量可以是字符串、 bool 或 number 类型。这些类型被称为工会的成员。

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

输出：

20
geeks
true

如果我们提供其他类型的变量会发生什么？在下面的代码中，我们尝试将函数分配给变量，但由于变量只能是字符串、数字或布尔类型，因此会引发错误。

Javascript

variable = function () {};

error TS2322: Type ‘() => void’ is not assignable to type ‘string | number | boolean’.
Type ‘() => void’ is not assignable to type ‘true’.

示例 2：使用 (|)运算符的函数。

在下面的示例中，我们创建了一个函数，并定义了一个接受字符串或数字的联合类型。

Javascript

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

输出：

You scored 99 in math
You scored 98 in math

当我们传入一个布尔类型值时，它会给出错误，因为我们的函数可以接受一个数字类型或字符串类型的参数。

Javascript

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

输出：

error TS2345: Argument of type ‘boolean’ is not assignable to parameter of type ‘string | number’.

示例 3：使用仅与一种类型关联的操作

TypeScript 只有在对所有联合成员都有效的情况下才允许执行操作。在下面的示例中 substr() 是仅对字符串而不是数字的操作，因此会引发错误。

Javascript

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

输出：

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

如果我们只想对特定类型使用操作，那么我们需要通过提供仅适用于特定类型的条件来缩小联合范围。例如：在下面的代码中，我们使用 typeof 来缩小联合。

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

输出：

You scored 98 in math
9