我在界面中预定义了属性,如下所示:
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
根据我的理解,只应显示匹配属性并非全部显示 .
2 回答
在typescript
as
中,keyword不是类型转换而是类型断言 . 所以发生的事情是这样的:你要求
User[]
你收到
JSON object[]
JSON object[]
被转换为User的接口数组(看看typescript中的接口是什么)编译器接受
this.userList
作为User[]
但它只是一个类型断言因此在这种情况下使用
as
关键字是多余的,完全没用 .类型断言仅对自动完成和编译时详细描述的其他类似事物有用 . 但这不是真正的演员 . 所以当你执行你的代码
this.userList
总是JSON Object[]
如果您需要真正的User对象,您应该执行以下操作:
显然你应该在
User
类中定义一个构造函数EDIT
查看您的Authors文件,我可以看到您正在使用转换为被视为Object的数组的xml语法 . 因此,map运算符失败 . 我改变了一下你的代码
User
AppComponent
使用Typescript定义接口对生成的Javascript代码完全没有影响,因为Javascript中不存在接口 . 你可以通过玩Typescript playground来搞清楚 . 接口只是帮助您(作为开发人员)和您的团队在编译时检测错误的东西 .
因此,无论您应用于哪个接口,从HTTP返回的对象将始终保持原样,因为Javascript中没有接口或强制转换 .