神奇的类型魔法 string & {}

153 阅读1分钟

别打我别打我,这东西真的可以用的。[护头]

看到这个东西的一瞬间,我的真实想法:

2ff9acd02f2eb9382c0beebfc2628535e5dd6f3d.gif

我的爸爸又高又矮又胖又瘦?

交叉类型来说,高和矮,胖和瘦并不交叉,这显然是不成立的,我爸又不是变形金刚。

我的爸爸很高/矮/胖/瘦?

image.png

这才能准确形容爸爸的外形特征,不至于成为一个变形金刚。

只有高矮胖瘦?

但是,形容人的外形的词不止这四个,而且这也不是选择题,我们不能限制学生的思考,我们需要让学生有自我思考的空间。于是我们给 Appearance 联合上 string 类型。

image.png

欸,不见了,给学生做参考的高矮胖瘦不见了,这可怎么整啊?

来,上魔法

OIP-C.jpg

image.png

现在我们不单单能够支持已有的形容词了,同时还能够使用其他的形容词,比如:高大威猛、瘦骨嶙峋、仙气飘飘等等。

总结

用一句话形容 string & {},在支持我们对已有的字符串进行枚举外,还支持我们扩展字符串。

image.png

他像是可扩展的下拉选择器。允许我们在已有的选项中选择,同样也允许我们添加其他选项。

同样,number & {} 是一个道理。

不要写成 {} & string,不信你去试试看。

如果你非要写成下面这种形式,我也不拦着你。毕竟又不是我 review 代码。

type Appearance = '高' | '矮' | '胖' | '瘦' | Omit<string, '高' | '矮' | '胖' | '瘦'>

参考

源码中使用了很多 string & {} 类型,请教一下这个类型代表什么含义? · alibaba formily · Discussion #1292 (github.com)

Literal String Union Autocomplete · Issue #29729 · microsoft/TypeScript (github.com)