本文介绍: TS 在遇到以下这些条件语句时,会在语句的块级作用域内「收紧」变量的类型,这种类型推断的行为称作类型守卫 (Type Guard)。=、!==(这里列举常用的 4 种)类型守卫可以帮助我们在块级作用域中获得更为精确的变量类型这里就可以通过判断 animal 中是否存在 meow 属性,来确定变量是否为 Cat 类型的对象let call;// 鼠标放到 animal 上,可以看到类型被限定为 Cat } else {
export interface Cat {
coatColor: string; // 毛色
varieties: string; // 品种
weight: number; // 体重
meow: () => void; // 喵喵叫
}
export interface Dog {
coatColor: string;
varieties: string;
weight: number;
bark: () => void; // 汪汪叫
}
const getAnimalInfo = isCat ? getCatInfo : getDogInfo;
const animal = await getAnimalInfo<Cat | Dog>({name: 'kangshifu'});
let call;
if(isCat){
call = animal.meow;
/* 报错,提示:
类型“Cat | Dog”上不存在属性“meow”。
类型“Dog”上不存在属性“meow”。
*/
} else {
call = animal.bark;
/* 报错,提示:
类型“Cat | Dog”上不存在属性“bark”。
类型“Cat”上不存在属性“bark”。
*/
}
现在我们假设,只能用一个变量来保存可能来自两个不同接口返回的数据,接口返回值类型已经设定为或的关系。
从变量中取某一个类型特有的属性时,便会提示在另一个类型中不存在该属性,应该如何解决?
1. 在变量取值时进行断言
let call;
if(isCat){
call = (animal as Cat).meow;
} else {
call = (animal as Dog).bark;
}
当 Cat 或 Dog 特有属性较多时,就需要加非常多的断言,会使代码显得十分不优雅
2. 借助类型守卫
什么是类型守卫?
TS 在遇到以下这些条件语句时,会在语句的块级作用域内「收紧」变量的类型,这种类型推断的行为称作类型守卫 (Type Guard)。
(这里列举常用的 4 种)
类型守卫可以帮助我们在块级作用域中获得更为精确的变量类型
这里就可以通过判断 animal 中是否存在 meow 属性,来确定变量是否为 Cat 类型的对象
let call;
if(isCat && 'meow' in animal){
call = animal.meow; // 鼠标放到 animal 上,可以看到类型被限定为 Cat
} else if(!isCat && 'bark' in animal) {
call = animal.bark; // animal 类型被限定为 Dog
}
真实的开发中,Cat 的特有属性往往有很多,不论使用哪个属性,似乎都在表示我们尝试以偏概全,至少代码看起来是这样的,就会显得十分不优雅
但不得不承认这也是一种非常好的限定类型的方法
3. 将老变量赋值给被限定类型的新变量
let call;
if(isCat){
const cat: Cat = animal;
call = cat.meow;
} else {
const dog: Dog = animal;
call = dog.bark;
}
原文地址:https://blog.csdn.net/qq_44647809/article/details/128474890
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_28746.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。