系列文章目录

TypeScript 从入门到进阶系列

1. TypeScript 从入门到进阶之基础篇(一) ts基础类型篇
2. TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇
3. TypeScript 从入门到进阶之基础篇(三) 元组类型篇
4. TypeScript 从入门到进阶之基础篇(四) symbol类型篇
5. TypeScript 从入门到进阶之基础篇(五) 枚举类型篇
   持续更新中…

---

---

前言

在一到五章，我们学习了在TypeScript 中 定义和使用各种类型 ,本章我们来学习TypeScript 在 类型（断言 、推论、别名）| 联合类型 | 交叉类型
请注意 本章内容 可能会出现在你面试时的面试题 是面试题常问的内容

---

一、联合类型

在 TypeScript 中，联合类型是指可以同时具有多个类型的类型。它使用 | 符号来表示多个类型之间的联合关系。
联合类型的变量可以接受其中任意一个类型的值。

例如，可以定义一个变量，它可以接受 string 或 number 类型的值：

let myVariable: string | number;

这样，myVariable 变量可以被赋值为一个字符串或一个数字，如下所示：

myVariable = "Hello World";
myVariable = 123;

联合类型在函数参数、返回值以及变量声明等场景中非常有用。它可以增加代码的灵活性，使得代码更加健壮和可维护。

二、交叉类型

在TypeScript中，交叉类型（Intersection
Types）是一种组合多个类型的方式。交叉类型可以将多个类型合并成一个类型，从而具备合并类型的所有特性。

交叉类型使用&符号表示，例如type A = B & C;，表示类型A是同时具备类型B和类型C的属性和方法。

交叉类型的作用是将多个类型的特性合并在一起，使得一个对象具备多个类型的属性和方法。举个例子，假设有一个接口A表示可触发事件的对象，以及一个接口B表示可拖拽的对象，可以通过交叉类型将两个接口合并成一个新的接口C，表示既可以触发事件又可拖拽的对象。

interface A {
  on(event: string, callback: () => void): void;
}

interface B {
  drag(): void;
}

type C = A & B;

const obj: C = {
  on(event, callback) {
    // 触发事件的逻辑
  },
  drag() {
    // 拖拽的逻辑
  }
};

通过上述例子可以看出，交叉类型可以让对象具备多个类型的特性，并且可以通过类型注解来保证对象满足合并类型的要求。

类型(断言 、推论、别名) 面试常问

1、类型断言（重点）

在 TypeScript 中，类型断言（Type Assertion）是一种告诉编译器某个值的类型的方式。类型断言可以在编译时确定某个值的类型，方便进行类型检查和类型推断。

有两种形式的类型断言：

1.1、 尖括号语法：

let str: any = "hello";
let length: number = (<string>str).length;

在尖括号内指定要断言的类型，在这个例子中断言 str 是一个字符串类型。编译器会将 str 的类型视为 string，从而可以调用 length 属性。

1.2、 as语法：

let str: any = "hello";
let length: number = (str as string).length;

使用 as 关键字，将要断言的类型放在 as 的后面。这个例子与上面的例子是等效的。

需要注意的是，类型断言只会在编译时起作用，不会改变原始值的类型。所以在进行类型断言时要确保断言的类型是正确的，否则可能会导致类型错误。

2、类型推论

在TypeScript中，类型推论是指 TypeScript编译器自动根据变量的初始值推断其类型的过程。当你声明一个变量并赋予初始值时，TypeScript编译器会根据这个初始值的类型来推断该变量的类型。

例如，当你声明一个变量并直接赋值一个数字时：

let num = 10;

//注意 如果你定义了一个类型 但没有给其赋值
//那么 a 的类型为 any
let a;

TypeScript 编译器会根据初始值 10 推断出 num 的类型为 number。这样，在后续的代码中，你就可以使用 num 作为一个数字类型的变量，并且编译器会对相关的类型进行检查。

又例如，vue3中 ref 的使用 在赋值时会自动推论类型

const bool=ref(true)
const str=ref('类型')

类型推论的好处是可以减少手动类型注解的工作量，并且使代码更简洁。然而，当初始值无法明确推断出类型时，你可能需要手动添加类型注解来指定变量的类型。

3、类型别名

在 TypeScript 中，类型别名（Type Alias）允许我们给一个类型起一个新的名字。通过使用类型别名，我们可以用一个简洁的名称来表示复杂的类型。

类型别名可以用来命名任何类型，包括原始类型（如字符串、数字等），联合类型，交叉类型，对象类型等。比如：

type MyString = string;
type MyNumber = number;
type MyBoolean = boolean;

// 联合类型
type MyUnion = string | number;

// 交叉类型
type MyIntersection = MyNumber & MyBoolean;

// 对象类型
type MyObject = {
  prop1: string;
  prop2: number;
};

使用类型别名可以增加代码的可读性和可维护性，特别是在处理复杂的类型时。类型别名的语法是 type 关键字加上一个名称，后面紧跟等号和类型定义。

类型别名还可以用于定义泛型类型，函数类型等。通过使用类型别名，我们可以将复杂的类型定义简化为一个具有描述性的名称，提高代码的可读性和可理解性。