TypeScript联合类型,交叉类型和类型保护

让我来为你详细讲解一下 TypeScript 的联合类型、交叉类型和类型保护攻略。

联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。用竖线 | 连接多个类型，例如：

let value: string | number;
value = 'hello'; // 字符串
value = 123; // 数字

上面的代码中，变量 value 的类型是 string 或 number。

联合类型可以用于限定参数、返回值、变量等数据类型，这样在函数调用或数据使用时会更加灵活。

例如，下面的示例中，函数 getLength 的参数可以是 string 或 number 类型，并返回它们的长度：

function getLength(value: string | number): number {
  return value.toString().length;
}

console.log(getLength('hello')); // 5
console.log(getLength(123)); // 3

交叉类型

交叉类型（Intersection Types）表示多种类型的合并。用 & 号连接多个类型，例如：

type Nameable = { name: string };
type Ageable = { age: number };

let person: Nameable & Ageable = {
  name: '张三',
  age: 18,
};

上面的代码中，person 变量的类型是同时具有 Nameable 和 Ageable 两个类型的对象。

交叉类型可以用于合并某些属性，并创建新的类型。在实际开发中，我们可以使用交叉类型来避免出现过多的类型定义。

例如，下面的示例中，我们创建了一个 Person 类型，该类型包含一个 name 属性和一个 age 属性：

type Person = Nameable & Ageable;

let person: Person = {
  name: '张三',
  age: 18,
};

类型保护

类型保护（Type Guards）是指在 JavaScript 中判断数据类型的方法，TypeScript 对它进行了封装和增强，可以更方便地进行类型保护。

TypeScript 中常用的几种类型保护方式包括 typeof 类型保护、instanceof 类型保护、自定义类型保护等。

typeof 类型保护

typeof 类型保护用来判断一个元素的类型，可以保证其是某种类型。

例如，下面的示例中，我们定义了一个 print 函数，该函数可以接受一个字符串或者数字类型的参数：

function print(value: string | number) {
  if (typeof value === 'string') {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

print('hello'); // HELLO
print(3.14159); // 3.14

instanceof 类型保护

instanceof 类型保护用来判断一个元素是否是某个类的实例。例如：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark() {
    console.log('汪汪汪');
  }
}

function createAnimal(type: 'animal' | 'dog'): Animal {
  if (type === 'animal') {
    return new Animal('动物');
  } else {
    return new Dog('狗狗');
  }
}

let animal = createAnimal('dog');
if (animal instanceof Dog) {
  animal.bark(); // 汪汪汪
}

在上面的代码中，我们通过 instanceof 来判断 animal 是否是 Dog 类的实例，如果是则可以调用 bark 方法。

自定义类型保护

自定义类型保护是利用函数的返回值来判断一个元素的类型。例如，下面的示例中，我们定义了一个 isString 函数，该函数根据传入的参数是否是字符串类型，返回 true 或 false：

function isString(value: any): value is string {
  return typeof value === 'string';
}

function print(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

print('hello'); // HELLO
print(3.14159); // 3.14

在 isString 函数中，我们使用了 value is string 的语法，该语法表明函数返回的结果是用来判断元素类型的。

以上就是 TypeScript 联合类型、交叉类型和类型保护的详细攻略，希望能对您有所帮助。