关于typescript的类型推断一些理解

我们先看一段代码:

interface defaultObjType {
    [key: string]: any;
}
interface SquareConfig {
  color?: string | defaultObjType;
  width?: number;
} 

let obj:SquareConfig = {
    color: {
        qw:123
    },
}

if(obj.color && obj.color.qw) {  // 这里报错,qw有个红色下划线
    
}

大家觉得这段代码有什么错,在我看自己看来也没错,可是在vsode里的ts编译器实时监测的时候,报了以下的错误:

Property 'qw' does not exist on type 'string | defaultObjType'.
Property 'qw' does not exist on type 'string'.

按照我们的理解,obj不是被赋值成以下这个对象了吗,怎么还是报错?

{
    color: {
        qw:123
    },
}

想了想,感觉自己用惯了js的写法,忘记自己使用的是typescript,因为自己已经给obj指明为SquareConfig 类型了,所以接下来的任何操作都是依照这个类型进行判断,所以这里就有这个报错了。
如何纠正,以下就是:

// 第一种方法
 if (obj.color && (obj.color as defaultObjType).qw) {
   // Access obj.color.qw safely
 }
 // 第二种方法
 if (typeof obj.color === 'object' && obj.color && obj.color.qw) {
  // Access obj.color.qw safely
 }

自己还有个疑问,为什么obj.color不会自己推导成 defaultObjType?,想了想自己已经给obj显式指明为SquareConfig 类型了,所以它不会自己推导了(即隐式推导),什么叫隐式推导,这里简单举个例子:

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值