浅聊一下TypeScript中的4种类型守卫
什么是守卫？
守卫是一种代码安全性检查，只在满足某个指定条件时运行一段特定的逻辑，比如vite中的import.meta.hot
什么是类型守卫？
类型守卫是TypeScript中特有的用于在运行时检查类型的方式，它显式的将javascript代码按类型划分，从而确保了运行安全
为什么需要类型守卫？
这可能要从一个联合类型说起。如下，是笔者提出的一个可能不那么贴合的示例：有联合类型Animal，它由Dog和Sp组成，它们都有hobby属性，但属性的类型不同
type Dog = {
hobby:'chishi'
}
type Sp = {
hobby:()=>void;
}
type Animal = Dog | SP现在你的代码里要根据Animal去做一些事情，预期是Sp时执行函数调用，是Dog输出console提示。如果没有守卫，则该需求无法实现，因为你无法确定subject到底是哪一种，执行调用不符合Dog，执行输出不满足Sp
如何守卫？
在TypeScript中，实现守卫的方式有4种：in、instanceof、typeof和自定义
1.typeof
该关键字只能用于对基础类型进行守卫，具体来说，是number、string、boolean、symbol、function、undefined
function log(subject:number|string):string{
if(typeof subject === 'number'){
return `${subject+5}`
}
if(typeof subject === 'string'){
return subject + '5'
}
return ''
}但它无法解决我们前文举例的Animal类型，因为typeof对对象只能识别到object，而对象下的属性是什么仍然是一个黑盒
2.instanceof
对象类型的识别可以借助instanceof关键字，它通过检查a是否是b的实例来确定a的可用范围
3.in
当两个类型是对象形式，但具有不同的独有属性时，可以使用in关键字来守卫。如下，TypeScript会自动将其推断为Dog类型
4.自定义
自定义类型保护是一种函数写法，该函数返回true或false，TypeScript会对返回值进行类型推断
如下，当传递的subject中包含hobby时，'hobby' in subject的结果为true
function isDog(subject:any):subject is Dog{
return 'hobby' in subject
}true的结果会进一步被TypeScript推断为Dog类型
到此这篇关于浅聊一下TypeScript中的4种类型守卫的文章就介绍到这了,更多相关TypeScript类型守卫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要讲解怎么在成功加载 js 文件后再执行相应回调任务,对JS脚本加载后执行相应回调函数的操作方法感兴趣的朋友，通过本文学习下吧2018-02-02
我们在使用JS渲染DOM时，一般使用字符串创建DOM然后附加到父元素上，如果附加的DOM是动态易变的，那需要在函数中写大量逻辑。如果在控件实现过程中，这带来的问题更为严重。2013-04-04
本文给大家分享的是使用有限的代码绘制八卦图，算是考核下自己对于javascript的理解，这里推荐给大家，有需要的小伙伴参考下。2015-04-04
通常的解决办法是把“答案”当作整个问题容器的子元素，然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。2008-09-09
本篇文章主要给大家讲述了JavaScript体验异步更好的解决办法，有这方面需要的朋友跟着学习参考下吧。2018-01-01
最近项目需要,一直在使用Echarts视图,现在遇到一个要修改echarts折线图颜色的需求,下面这篇文章主要给大家介绍了关于Echarts折线图设置线条颜色及线条以下区域渐变颜色的相关资料,需要的朋友可以参考下2024-02-02
页面定时刷新的示例想必大家也见到不少，在本文将为大家介绍的是，如何实现1秒刷新一次，感兴趣的朋友可以了解下本文2013-11-11
这篇文章主要给大家介绍了关于javascript中如何判断类型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要给大家介绍了关于JS动态添加元素及绑定事件造成程序重复执行的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-12-12
这篇文章主要介绍了JS实现的论坛Ajax打分效果,以完整实例形式分析了JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下2015-10-10
最新评论