问答

typescript联合类型如何方便地访问属性?

作者:admin 2021-04-20 我要评论

如图,声明的 filter 是个联合类型,一部分有 days 属性一部分没有(下面的判断同理) 一个个判断是否含有该属性实在是太不优雅了 然而注释掉的这种写法也会报ts...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png

如图,声明的filter是个联合类型,一部分有days属性一部分没有(下面的判断同理)

一个个判断是否含有该属性实在是太不优雅了

然而注释掉的这种写法也会报ts错误,同样的不能这样写

是否有更优雅的写法呢?

这里有个demo能帮忙阐述我的问题

interface A{
  a: string
}

interface B{
  b: number
}
interface C{
  c: string
}
type ABC = A | B | C

const fn = (param: ABC) => {
  const obj = param.b // 这里无法通过ts检查,因为属性b并不是一定存在的
  // 在官方实例中,这种情况应该使用类型保护,也就是下方的写法
  // 但实际业务中通常需要访问很多属性,要一个个in判断实在是太冗余了
  // 有更优雅的写法吗?
  // if ('b' in param) {
  //   obj = param.b
  // }
  return obj
}

###

param 所拥有的属性并不能非常明确的确定,TypeScript 就不能安全的判断哪些属性可用,哪些不可用,所以不会通过检查。

如果要让 TypeScript 明白,属性确实可用,那就必须证明 param 确实是某种类型,这不是抽象层面的,而是实现层面的。通常在 JS 中我们会这么检查:

if (param.b) {
    // 这说明 param 中有 b 这个属性,符合 B 类型的特征
}

在 TypeScript 中可以定义一个 isB() 函数来进行判断,

function isB(it: ABC): it is B {
    return (it as B).b !== undefined;
}

注意它的返回类型,不是单纯的 boolean,而是一个类型判定,有了这个判定函数之后,就可以在业务代码中这样写:

const fn = (param: ABC) => {
    if (isB(param)) {
        const obj = param.b;    // 这里就可以识别 param 是 B 类型了
    }
}

image.png

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器