Angular更改当我使用promise时的接口定义

2 年前

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

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 []数组 .

ISSUE:
虚拟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

根据我的理解，只应显示匹配属性并非全部显示 .

angulartypescriptinterfaceangular6

2回答

1 年前

在typescript as 中，keyword不是类型转换而是类型断言 . 所以发生的事情是这样的：

你要求 User[]
你收到 JSON object[]
JSON object[] 被转换为User的接口数组（看看typescript中的接口是什么）
编译器接受 this.userList 作为 User[] 但它只是一个类型断言

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

类型断言仅对自动完成和编译时详细描述的其他类似事物有用 . 但这不是真正的演员 . 所以当你执行你的代码 this.userList 总是 JSON Object[]

如果您需要真正的User对象，您应该执行以下操作：

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

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

EDIT

查看您的Authors文件，我可以看到您正在使用转换为被视为Object的数组的xml语法 . 因此，map运算符失败 . 我改变了一下你的代码

User

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);
    });
  }
}

0
1 年前
使用Typescript定义接口对生成的Javascript代码完全没有影响，因为Javascript中不存在接口 . 你可以通过玩Typescript playground来搞清楚 . 接口只是帮助您（作为开发人员）和您的团队在编译时检测错误的东西 .

因此，无论您应用于哪个接口，从HTTP返回的对象将始终保持原样，因为Javascript中没有接口或强制转换 .

暂时没有评论！

Angular更改当我使用promise时的接口定义

相关问题