与promise一起使用时的角度更改接口定义

Question

我在界面中具有预定义的属性，如下所示：

export interface User {
  userID : number;
  userName : string;
  userAge : string;
}

另外，我有从一些虚拟REST API返回一些虚拟数据的服务。

getUsers(){
    return this.http.get("https://fakerestapi.azurewebsites.net/api/Authors").toPromise();
  }

在组件中，我正在使用此服务，并按照以下代码将数据转换为用户列表：

 _service.getUsers().then(i => { this.userList = i as User[]; console.log(this.userList) });

如您所见，我使用“ AS”将响应转换为各自的user []数组。

问题：
虚拟REST api重新运行以下数据

{
    "ID": 1,
    "IDBook": 1,
    "FirstName": "First Name 1",
    "LastName": "Last Name 1"
  }

并且用户类不具有ID，IDBook等属性。当我检查控制台时，它会自动更改User类的定义并显示所有数据，尽管属性不匹配。

链接： https ： //stackblitz.com/edit/angular-pryy3f？file = src％2Fapp％2Fappservice.service.ts

根据我的理解，仅显示匹配属性，而不是全部。

Answer 1

在typescript中as关键字不是类型转换，而是类型声明。 所以这是怎么回事：

• 您要求一个User[]
• 您收到一个JSON object[]
• JSON object[]转换为用户的接口数组（看看打字稿中的接口是什么）
• 编译器将this.userList作为User[]接受，但这只是类型断言

因此as在这种情况下，使用as关键字是多余的，并且完全没有用。

类型断言仅对自动完成和在编译时详细说明的其他类似事情有用。 但这不是真正的演员。 因此，当您执行代码时， this.userList始终是JSON Object[]

如果需要真正的用户对象，则应执行以下操作：

_service.getUsers().then(i => { 
    this.userList = i.map(u => new User(u)); 
    console.log(this.userList) 
});

显然，您应该在User类中定义一个构造函数

编辑

查看您的Authors文件，我可以看到您正在使用xml语法，该语法已转换为被视为Object的数组。 因此，映射运算符失败。 我更改了您的代码

用户

export class User {
  userID : number;
  FirstName : string;
  userAge : string;

  constructor()
  constructor(u: User)
  constructor(u?: User) {
     this.userID = u && u.userID || -1;
     this.FirstName = u && u.FirstName || '';
     this.userAge = u && u.userAge || '';
  }

  clone(): User {
    // TODO CLONE USER
    return new User();
  }
}

AppComponent

import { Component } from '@angular/core';
import { AppserviceService } from './appservice.service';
import { User } from './user';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private userList: User[] = [];
  constructor(private _service: AppserviceService) {
    _service.getUsers().then(i => {  
      for (let c=0; c<10; c++) {
        let u = new User(i[c]);
        this.userList.push(u);
      }

      console.log('this.userList', this.userList);
    });
  }
}

Answer 2

用Typescript定义接口对生成的Javascript代码绝对没有影响，因为Javascript中不存在接口。 您可以通过在Typescript游乐场玩耍弄清楚 。 接口只是可以帮助您（作为开发人员）和您的团队在编译时检测错误的东西。

因此，从HTTP返回的对象将始终保持原样，而与您对其应用的接口无关，因为在Javascript中没有接口或强制转换这样的东西。