浅谈TS联合类型

一、TS联合类型高级特点

在TS中，联合类型是指使用竖线 | 将多个类型合并成一个新类型。一个联合类型的值可以是多种不同类型中的一种。

联合类型的高级特点在于，它可以用来描述对象的属性。比如，我们可以利用联合类型来描述一个对象可能存在的不同属性类型。举个例子：

interface A {
  type: "A",
  name: string
}

interface B {
  type: "B",
  age: number
}

type C = A | B;

function getNameOrAge(obj: C): string | number {
  if (obj.type === "A") {
    return obj.name;
  } else {
    return obj.age;
  }
}

在上面的例子中，接口 A 和接口 B 都有一个 type 属性，且它们的取值不同。通过将 A 和 B 组合成联合类型 C，我们可以创建一个参数为 C 类型的函数 getNameOrAge。函数的逻辑是如果参数的 type 属性为 "A"，则返回 name 属性的值；否则返回 age 属性的值。这样，我们就可以通过一个函数处理不同类型的对象了。

二、TS联合类型推导

TS 可以推导联合类型，但只能通过处理一系列条件来实现。在下面的例子中，变量 fibArr 的类型是一个由 number 和 string 组成的联合类型：

const fibArr = [0, 1, "1", 2, "3"]
// fibArr: (string | number)[]

而在下面的例子中，类型会被 TS 推导为单独一个类型，而不是联合类型：

const fibNumArr = [0, 1, 1, 2, 3] // fibNumArr: number[]

因为数组中只存在 number 类型的值，所以类型被 TS 推断为 number[]。

三、TS联合类型转JS数组

在将 TS 代码转换为 JS 代码后，联合类型就会消失。因为 JS 中并没有联合类型的概念，联合类型会被转换成数组。在下面的例子中，TS 中的联合类型将被转换成 JS 中的数组：

type Test = string | number;
// Test: (string | number)

const test: Test = "Hello world";
// 已被转换成 TypeScript

const testArray = ["Hello world", 42];
// 已被转换成 JavaScript

四、TS联合类型还叫什么

在一些语言中，联合类型也被称作可选类型或者选择类型。这些术语都可以用来描述同样的概念，都可以用来表示一个变量可以接受多种不同类型的值。

五、TS联合类型交叉类型

在 TS 中，交叉类型使用 & 符号连接多个类型，表示它们的结果为多个类型的并集。举个例子：

interface A {
  typeA: string;
}

interface B {
  typeB: number;
}

type C = A & B;

const obj: C = {
  typeA: "string",
  typeB: 1
};
// obj: {typeA: string, typeB: number}

在这个例子中，一个交叉类型 C 包含类型 A 和类型 B 的属性。通过定义交叉类型，我们可以创建一个既包含 A 又包含 B 的对象。

六、TS联合类型和交叉类型

在 TS 中，可以使用联合类型和交叉类型来实现更复杂的类型。比如，在下面的例子中，我们组合使用了联合类型和交叉类型：

interface A {
  type: "A";
  name: string;
}

interface B {
  type: "B";
  age: number;
}

interface C {
  type: "C";
  flag: boolean;
}

type D = (A | B) & C;

const obj: D = {
  type: "A",
  name: "test",
  flag: true
};
// obj: {type: "A", name: string, flag: boolean}

在这个例子中，我们创建了联合类型 A | B 和交叉类型 A | B & C 组成的类型 D。类型 D 表示只有 type 为 "A" 或 "B" 并且同时具有属性 name 和 flag 的对象。这就是联合类型和交叉类型结合的威力。

七、TS联合类型转元组

如果我们想把一个类型变成包含多种不同类型的元组，可以使用类似下面的方法：

type Test = [number] | [string];
// Test: [number] | [string]

const testNum: Test = [42];
const testString: Test = ["Hello, world!"];

在这个例子中，我们定义了一个元组类型 Test，它包含了一个数字或者字符串。变量 testNum 的类型为 [number]，变量 testString 的类型为 [string]。这样一来，我们就可以创建一个类型为 【数字或字符串】类型的数组了。

八、TS联合类型表达式

在 TS 中，可以使用表达式通过联合类型来表示一个具体的类型。在下面的例子中，这个联合类型通过表达式来表示一个类型是字符串并且长度为 10：

type Test = string & { length: 10 };
// Test: string & { length: 10 }

const test: Test = "Hello world";
// 'test'不具备类型'{ length: 10 }'

这段代码的效果是约束了 test 变量的值必须是字符串类型，并且它的长度必须为 10。如果不符合这两个条件中的任何一个，TS 将会报错。

九、TS联合类型转换成对象

在 TS 中，联合类型常常被用于转换成对象。在下面的例子中，我们使用了 TS 的 typeof 和 keyof 运算符来转换联合类型为对象：

type Member = "name" | "age" | "email";
type Person = {
  [K in Member]?: string;
}

const person: Person = {
  name: "John",
  age: "42",
  email: "john@example.com",
  address: "Test street 1"
};
// person: {name?: string, age?: string, email?: string}

在这个例子中，我们使用了 Member 类型表示一个人的成员，比如姓名、年龄和电子邮件等。我们通过 Person 类型将 Member 类型转换成一个包含可选属性的对象，并且限制属性的值只能是字符串类型。如果想要将 person 对象转换成包含 Member 类型的数组，可以使用 keyof 运算符实现：

type MemberArray = Array<keyof Person>;
// MemberArray: (keyof Person)[]

结束语

总之，联合类型在 TS 中有着非常重要的地位，可以帮助我们在开发过程中处理多种不同类型的对象，给开发带来了很大的方便和便利。希望通过以上的讲解能让读者对于 TS 联合类型产生更深层次的理解和认知。