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

作者站长头像
站长
· 阅读数 3
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
    }
  }

}

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

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

obj = {
    text: null
};

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

后续

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

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

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

回复
1个回答
avatar
test
2024-06-23

因为 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 }
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容