如何在Angular中直接将HTTP响应分配给接口模型类型

Question

app.component.ts

import { Component,OnInit } from '@angular/core';
import { DataServiceService } from './data-service.service';
import {IModel} from './imodel';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  resultArray:IModel;
  constructor(private dataService:DataServiceService){}
  ngOnInit(){
    this.dataService.getDataFromURL().subscribe((resultData)=>{
      debugger
      this.resultArray=resultData;
    })
  }
}

dataservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataServiceService {

  apiURL='https://jsonplaceholder.typicode.com/posts';
  constructor(private http:HttpClient) { }

  getDataFromURL(){
    return this.http.get(this.apiURL)
  }


}

imodel.ts

export interface IModel {
       userId: number;
        id: number;
        title: string;
        body: string;
}

我创建了一个模型接口,并尝试从API中获取数据.我已成功检索数据,但我无法将响应分配给resultArray,这是一个IModel类型,显示错误"类型'对象'不能分配给类型'IModel'.'对象'类型可分配给非常其他几种类型.你的意思是使用'any'类型吗？'Object'类型中缺少属性'userId'.

Answer 1

该http.get方法是通用的.这意味着您可以像这样指定返回类型:

getDataFromURL(): Observable<IModel> {
  return this.http.get<IModel>(this.apiURL)
}

阅读有关打字稿泛型的更多信息.