Angular报错：Type '{}'无法赋值给类型'IQuest[]'，求解决方案

嘿，这个类型不匹配的问题我之前也碰到过，其实核心原因就是TypeScript的类型推断没跟上——你调用服务的getAll()方法时，没明确告诉它你期望返回的数据类型，导致它默认推断返回的是{}类型，和你定义的IQuest[]数组类型不兼容，所以才会报Property 'includes' is missing这类错误（毕竟数组才有includes方法，空对象可没有）。

具体修复步骤 #

你只需要在调用getAll的时候，明确传入泛型参数IQuest[]，告诉TypeScript这个请求返回的是IQuest对象数组就可以了。修改后的组件代码如下：

questions:IQuest[]=[];
ngOnInit(){
  // 这里添加<IQuest[]>指定泛型类型
  this.service.getAll<IQuest[]>().subscribe(data=>{
    console.log(data);
    this.questions = data;
  },error=>{
    console.log(error);
  });
}

额外优化建议 #

如果想避免手动订阅、取消订阅的麻烦，还可以用Angular的async管道简化代码：

1. 组件里把questions改成可观察对象：

questions$: Observable<IQuest[]>;

ngOnInit(){
  this.questions$ = this.service.getAll<IQuest[]>();
}

2. 模板里使用async管道自动处理订阅：

<div *ngFor="let question of questions$ | async">
  <!-- 在这里渲染你的问题内容 -->
</div>

这样既能自动管理订阅生命周期，代码也会更简洁清爽~

内容的提问来源于stack exchange，提问作者Rahul Gore