Typescript 管道（`|`）符号的意义是什么？

在Typescript中，管道（|）被称为联合类型或”或”。它也被称为Typescript中的联合类型。联合类型描述了可以是多种类型中的任何一种的值。每种类型之间用管道（|）分隔，因此number | string表示类型可以是字符串或数字的值。或者我们可以说指定的任一类型都是允许的。

示例1： 我们给一个变量赋值，然后使用管道（|）或联合类型，表明该变量可以是字符串、布尔值或数字的类型。这些类型被称为联合类型的成员。

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

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

variable = function () {};

错误 TS2322：类型“() => void”不可赋值给类型“string | number | boolean”。

类型“() => void”不可赋值给类型“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);

输出:

错误 TS2345: 类型 ‘boolean’ 的参数不能赋给类型'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");

输出：