这段for..in代码的报错原因是?

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'rxc-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  obj = { text: null };

  ngOnInit(): void {
    for (let key in this.obj) {
      console.log(key) // text
      console.log(this.obj[key]); // error
    }
  }

}

image.png

不是很理解为什么会报错? 在js当中这类代码是可以正常执行的

obj = {
    text: null
};

for (let key in this.obj) {
    console.log(key) // text
    console.log(this.obj[key]); // null
}

后续

加了类型的定义any, 报错就消失了..

image.png

但是为什么会有这种情况出现呢?
我在 ts 中不给类型直接赋值, 难道程序识别不出 this.obj 是一个对象吗?

阅读 794
2 个回答

因为 TS 推断出来的 this.obj 只有一个确切的键 'text',而 for...in 遍历出来的键 key,类型被推断为 string,所以 TS 认为 key 不是 this.obj 的键。
虽然不知道 TS 为啥会这样“睁着眼睛说瞎话”,但事情就是这么个事情。
可以对key作类型断言:

for(const key in this.obj){
  console.log(this.obj[key as keyof typeof this.obj]);
}

但是这样的方法显然不甚讨喜,如果仅仅是把 this.obj 作为键值对容器使用的话,可以将其类型定义为Record

{
  obj:Record<string, unkown> = { text: null }
}

猜测应该是[]里可能还会放数组的索引, 这样程序就不确定他到底是一个对象还是一个数组, 所以还是要在定义时还是要给一个明确的类型

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
logo
Microsoft
子站问答
访问
宣传栏