與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中沒有接口或強制轉換這樣的東西。