关于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 类型了,所以它不会自己推导了(即隐式推导),什么叫隐式推导,这里简单举个例子:

关于typescript的类型推断一些理解_第1张图片

你可能感兴趣的:(typescript,typescript,javascript,前端)