这段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
}
}
}
不是很理解为什么会报错? 在js当中这类代码是可以正常执行的
obj = {
text: null
};
for (let key in this.obj) {
console.log(key) // text
console.log(this.obj[key]); // null
}
后续
加了类型的定义any, 报错就消失了..
但是为什么会有这种情况出现呢?我在 ts 中不给类型直接赋值, 难道程序识别不出 this.obj 是一个对象吗?
回复
1个回答
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 }
}
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容