Угловое изменение интерфейса определения, когда я использую как с обещанием

Question

У меня есть предопределенные свойства в интерфейсе, как показано ниже:

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

Кроме того, у меня есть служба, которая возвращает некоторые фиктивные данные из некоторых фиктивных API REST.

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

и в компоненте IЯ использую эту услугу и конвертирую данные в список пользователей согласно приведенному ниже коду:

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

, как вы можете видеть, я использовал 'AS' для преобразования ответа в мой соответствующий массив user [].

ВЫПУСК:
фиктивный API REST перезапускает следующие данные

{
    "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

В машинописном тексте as ключевое слово - это не приведение типа, а утверждение типа.Итак, что происходит, это:

• вы запрашиваете User[]
• вы получаете JSON object[]
• JSON object[] превращается в пользователямассив интерфейса (посмотрите, что такое интерфейс в машинописи)
• компилятор принимает 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 класс

РЕДАКТИРОВАТЬ

Глядя на ваш файл авторов, я вижу, что вы используете синтаксис xml, который преобразуется в массив, рассматриваемый как объект.По этой причине оператор карты не работает.Я немного изменил твой код

Пользователь

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 нет такой вещи как интерфейс или приведение.