类型断言和可选链操作符有什么区别？

来源：6-9 大功告成 - SubMenu 下拉菜单编码第三部分

infjer

2021-06-29

老师你好，视频中源代码是这样写的

const openedSubMenus = context.defaultOpenSubMenus as Array<string>
const isOpend = (index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false

我是先看一遍视频之后再试着写一遍代码，并没有注意到context.defaultOpenSubMenus的值可能是undefined，不过vscode很智能的自动帮我补了一个可选操作符，结果代码如下

const isOpend = (index && context.mode === 'vertical') ? context.defaultOpenSubMenus?.includes(index) : false

以上代码的运行结果是正常的，所以我想问：类型断言和可选链操作符有什么区别？（在这种情况下，似乎类型断言就没有必要了。。。）

写回答

1回答

张轩

2021-06-30

已采纳

同学你好

这里用类型断言的原因是比较快捷的解决 undenfined 的数据类型

如果不用类型断言，context.defaultOpenSubMenus 有可能是 undefined
在这里，假如使用类型守卫，也可以解决这个问题
if (context.defaultOpenSubMenus) {
    // 现在 defaultOpenSubMenus 就是 string[] 类型了
}

所以可选链操作符其实完成的是上面的工作，将 undefined 自动甄别掉了，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

所以结论是类型断言和可选链操作符是两个维度的概念，一个是 ts 的特性，一个是 js 的特性，在这里它们恰好完成了同样的工作，不过它们的功能本身不具有可比性。

infjer

非常感谢！

2021-07-08

共1条回复

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2124 学习 · 959 问题

查看课程

相似问题

关于React.FC<P={}> 这个泛型默认值的问题