TypeScript 中 Union Type 的用法详解

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，为 JavaScript 增加了静态类型检查和一些新特性。其中，Union Type 是 TypeScript 中的一个重要特性，它可以让我们定义一个变量可以接受多种类型的值。本文将详细介绍 Union Type 的用法，包括定义、操作和应用场景。

定义

在 TypeScript 中，我们可以使用 | 符号来定义 Union Type。例如，下面的代码定义了一个变量 myVar 可以接受 string 或 number 类型的值：

let myVar: string | number;

这样，我们就可以将字符串或数字赋值给 myVar 变量：

myVar = "hello";
myVar = 42;

Union Type 还可以与其他类型修饰符一起使用，例如可选参数、默认值等。例如，下面的代码定义了一个函数 myFunc，它接受一个可选参数 myParam，类型可以是 string 或 number：

function myFunc(myParam?: string | number) {
  // ...
}

操作

在使用 Union Type 定义变量之后，我们可以使用 TypeScript 提供的操作符来处理这些变量。

类型保护

当我们在代码中使用 Union Type 定义变量时，有时候需要根据变量的类型来执行不同的操作。这时候，我们可以使用类型保护来判断变量的类型。例如，下面的代码定义了一个函数 printLength，它接受一个参数 strOrArr，类型可以是 string 或 string[]。在函数中，我们使用 typeof 操作符来判断变量的类型，然后分别执行不同的操作。

function printLength(strOrArr: string | string[]) {
  if (typeof strOrArr === "string") {
    console.log(strOrArr.length);
  } else {
    console.log(strOrArr.length);
  }
}

类型缩小

在 TypeScript 中，我们可以使用类型缩小来缩小变量的类型范围，从而在后续代码中更方便地处理变量。例如，下面的代码定义了一个函数 myFunc，它接受一个参数 myParam，类型可以是 string 或 number。在函数中，我们先判断 myParam 的类型是否为 string，如果是，则将 myParam 转换为 string 类型，然后执行 toUpperCase 方法。

function myFunc(myParam: string | number) {
  if (typeof myParam === "string") {
    myParam.toUpperCase();
  }
}

类型推导

在 TypeScript 中，我们可以使用类型推导来推断变量的类型。例如，下面的代码定义了一个变量 myVar，它的类型是 string 或 number，但是在赋值时，我们可以根据赋值的类型来推断变量的类型。

let myVar = "hello";
myVar = 42;

应用场景

Union Type 在 TypeScript 中有很多应用场景，例如：

处理不同类型的数据

当我们需要处理多种类型的数据时，可以使用 Union Type 来定义变量。例如，下面的代码定义了一个变量 myData，它可以接受 string 或 number 类型的数据，然后根据数据的类型执行不同的操作。

let myData: string | number;

if (typeof myData === "string") {
  myData.toUpperCase();
} else {
  myData.toFixed(2);
}

处理可选参数

当我们需要处理可选参数时，可以使用 Union Type 来定义参数的类型。例如，下面的代码定义了一个函数 myFunc，它接受一个可选参数 myParam，类型可以是 string 或 number。

function myFunc(myParam?: string | number) {
  // ...
}

处理联合类型数据

当我们处理联合类型数据时，可以使用 Union Type 来定义变量。例如，下面的代码定义了一个变量 myData，它可以接受 string 或 string[] 类型的数据，然后根据数据的类型执行不同的操作。

let myData: string | string[];

if (typeof myData === "string") {
  myData.toUpperCase();
} else {
  myData.forEach((item) => {
    console.log(item);
  });
}

总结

本文详细介绍了 TypeScript 中 Union Type 的用法，包括定义、操作和应用场景。Union Type 是 TypeScript 中非常重要的一个特性，可以让我们更方便地处理多种类型的数据和可选参数，同时也可以处理联合类型数据。在实际开发中，我们可以根据具体的场景来灵活应用 Union Type。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c4bcccadd4f0e0fff50516