乐趣区

关于typescript:换个视角来看TypeScript中的交叉运算

引文

置信只有接触过 ts 的同学就有理解穿插类型这两个概念,以前我对穿插类型感到十分纳闷,明明叫穿插类型,为何对对象类型应用了穿插运算后类型反而会进行属性的合并?不晓得大家有没有和我一样的困惑。这篇文章我会分享我最近感悟到的用不同视角来解释呈现上述问题的起因,如有谬误,恳请斧正。

穿插运算

在 ts 中,应用 & 这个符号来对两个类型进行穿插运算,上面举几个小例子来开始解说。

例一

type A = number & string    // never

例二

type A = 1 & number                // 1
type B = "hello" & string          // "hello"

例三

type A1 = {a: number}
type A2 = {aa: string}

这里的例子正是我在引文中提到的状况,依照穿插这个字面意思来了解,{a: number}{aa: string} 两个如同也没有什么交加,依照例一的思路来思考,后果应该是 never,为何后果是{a: number, aa: string}

首先来思考一个问题,假如有这么几个对象:

  • {a: 1, b: 2}
  • {aa: “11”, bb: “22”}
  • {a: 1, b: 2, aa: “11”, bb: “22”}

这几个对象别离赋值给类型为 A1、A2、A 的变量,哪个类型的变量在被赋值的时候有比拟大的可能会呈现谬误?

置信大家可能很容易的猜到答案,那就是下面的这三个对象在给类型为 A 的变量赋值的时候前两个对象都会报错,只有最初一个对象是合乎类型要求的。

上述中的 A1、A2 类型,A1 类型的变量只须要值中有属性名为 a,属性值类型为 number 的属性即可满足,而 A2 类型的变量只须要值中有属性名为 aa,属性值类型为 string 的属性即可满足,而 A 类型的变量对值的要求是必须要同时有 a 和 aa 这两个属性。

那么合乎 A1、A2、A 类型的值各有几个?能够归类下

  • 合乎 A1 类型的值:{a: 1, b: 2}、{a: 1, b: 2, aa: “11”, bb: “22”}
  • 合乎 A2 类型的值:{aa: “11”, bb: “22”}、{a: 1, b: 2, aa: “11”, bb: “22”}
  • 合乎 A 类型的值:{a: 1, b: 2, aa: “11”, bb: “22”}

能够看到在 A1 & A2 后失去的 A 类型,其值绝对于 A1 和 A2 这两个类型对应的值的范畴是变小的,这也合乎穿插运算的后果趋势。

咱们对数学中的交并集运算有着很深的印象,然而数学上交并集运算作用的对象却是具体的数值,如果把这种思维转换到 ts 类型上来,其实不太适合,而是应该把这种思维作用到 ts 类型所对应的值上。

当初用这种思路去思考例一和例二,也是可能走通的。

穿插运算在解决对象类型的时候,穿插过后属性反而增多,初看感觉不对劲,但转换角度细想或者能发现其中的情理。

总结:穿插运算会导致可能赋值给后果类型的变量范畴变小,这个类型的限度也会变得更严格。

退出移动版