名称：Typescript类型之联合类型与交叉类型

目录：

一、联合类型

  1、介绍

  2、访问联合类型的属性或方法

二、交叉类型
  1、使用
     
字数：大约700字

一、联合类型

联合类型（Union Types）描述的值可以是几种类型之一。 当值不受控制时（例如，来自库、API 或用户输入的值），这种灵活性将很有帮助。

联合类型使用竖线 (|) 分隔每种类型。 在以下示例中，multiType 可以是 number 或 boolean，但是不能是其他类型

let multiType: number | boolean;
multiType = 20;         // ✅
multiType = true;       // ✅
multiType = "twenty";   // ❌
// Type '"twenty"' is not assignable to type 'number | boolean'.

1、介绍

下面以实例来看看。

以登录和注册为例，两个数据存在共同的数据结构：用户名、密码。根据数据后台的数据接口字段提炼出以下的ts类型。

/**登录数据结构 */
interface LoginData {
    userName: string
    passWord: string
    platType: string
    valiCode: string
}

/**注册数据结构 */
interface RegData {
    userName: string
    passWord: string
    sex: string
    valiCode: string,
    avator: string
}
type Union = LoginData | RegData;

使用

✅
const data: Union = {
    userName: "小哥",
    passWord: "Aa1234",
    sex: 'male',
    valiCode: '2649',
    avator: 'cute.jpg',
}
✅
const data: Union = {
    userName: "小哥",
    passWord: "Aa1234",
    platType: 'PC',
    valiCode: '2649',
}

所以联合类型，就是会产生一个包含所有类型（添加的类型）的选择集类型，声明的数据结构满足其中之一即可。

2、访问联合类型的属性或方法

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

❌
function getAttr(something: string | number) {
    return something.parseInt();
}
// error TS2339: Property 'parseInt' does not exist on type 'string | number'.
// Property 'parseInt' does not exist on type 'string'.

上例中，parseInt() 不是 string 和 number 的共有属性，所以会报错。

✅
function getAttr(something: string | number) {
    return something.toString();
}

访问 string 和 number 的共有属性是没问题的

二、交叉类型

交叉类型与联合类型密切相关，但它们的使用方式不同。 交叉类型组合两个或多个类型以创建具有现有类型的所有属性的新类型。 使用交叉可以将现有类型加在一起，以获得具有所需的所有功能的单个类型。

1、使用

交叉类型使用与号 (&) 分隔每种类型。

/**登录数据结构 */
interface LoginData {
    userName: string
    passWord: string
    platType: string
    valiCode: string
}

/**注册数据结构 */
interface RegData {
    userName: string
    passWord: string
    sex: string
    valiCode: string,
    avator: string
}
type Union = LoginData & RegData;
✅
const data: Union = {
    userName: "小哥",
    passWord: "Aa1234",
    platType: 'PC',
    valiCode: '2649',
    sex: 'male',
    avator: '123.jpg'
}
❌
const data: Union = {
    userName: "小哥",
    passWord: "Aa1234",
    platType: 'PC',
    valiCode: '2649',
    sex: 'male',
}
// error TS2322: Type '{ userName: string; passWord: string; platType: string; valiCode: string; sex: string; }' is not assignable to type 'Union'.
// Property 'avator' is missing in type '{ userName: string; passWord: string; platType: string; valiCode: string; sex: string; }' but required in type 'RegData'.

所以交叉类型，就是会产生一个两个接口中的属性组合在一起的类型。声明的数据结构需要满足合并后生成的新的类型。