TypeScript之联合类型和交叉类型

这就是关于类型的组合，对类型进行逻辑运算或者说是对类型进行函数式编程。
JS编程是一种编程，在JS的类型上进行编程就是类型体操。

联合类型操作符：｜
交叉类型操作符：&
本文将以示例的方式讲解，清晰明了！

联合类型与区分联合类型

// 1. 联合类型初体验
type A = {
    name: string,
    age: number
}
type B = {
    name: string,
    gender: string
}
const f = (n: number | B) => {
        n.toFixed() // n若为number则可以调用，但类型不确定，50%的概率出错，所以我们要在这行代码之外写一个类型判读
}

// 2. 外加类型判断
type A = {
    name: string,
    age: number
}
type B = {
    name: string,
    gender: string
}
// 联合类型 | 的两边可以是任意类型(简单类型 or 复杂类型) 
const f = (n: number | B) => {
    if (typeof n === 'number') { // TS可以通过这行代码进行类型收窄，预测n的类型是否是number
        n.toFixed() // n若为number则可以调用，但类型不确定，50%的概率出错，所以我们要在这行代码之外写一个类型判读
    }else{
        n.name
    }
}

// 3. 类型复杂度升级
type A = {
    name: 'a',
    age: number
}
type B = {
    name: 'b',
    gender: string
}
const f = (n: A | B) => {
    n.age // 报错：Type A和Type B有相同key: name，A无age属性，所以要进行类型区分
}

// 4. 使用“区分联合类型解决”解决
type A = {
    name: 'a';
    age: number
}
type B = {
    name: 'b';
    gender: string
}
const f = (n: A | B) => {
    // 只有这两个Type都有一个相同key拥有不同value时才能进行判断
    if(n.name === 'a'){
        n.age // 报错：Type A和Type B有相同key: name，A无age属性，所以要进行类型区分
    }else{
        n.gender
    }
}

总结

1. 如果有简单类型，可以直接用typeof进行判断。
2. 如果有复杂类型且各个类型的相同key拥有不同的value，则要利用不同的value进行类型区分。

交叉类型

// 1. 交叉类型初体验
type A = number & string // 等价于type A = never，由此可见交叉类型不适用于基本数据类型

// 2. 复杂类型再试试
// 别被名字骗啦不是取交集！！反而是取并集，而且声明的实例里一定要包含并集的所有类型哦
type A = {name: string} & {age: number}
const a:A = {
    name: 'frank',
    age: 21
}

// 3. 如果复杂类型之间有交集呢？
// typeof A === never，无法合并
type A = {name: string, age: boolean} & {age: number}
const a:A = {
    name: 'frank',
    age: 21
}