Преобразовать из типа «любой» в объект

Question

Я пытаюсь выучить Angular из онлайн-курса, но в курсе используется более старая версия Angular, до сих пор я не мог адаптироваться к Angualar 7, но теперь я застрял в этой проблеме:

В компоненте он определяет объект Vehicle типа any и устанавливает его значение с помощью API, например:

"vehicle: any = {
  features: [],
  contact: {}
};"

ngOnInit() {

      var sources =[]; //I omitted the other properties

    if(this.vehicle.id)    
      sources.push(this.vehicleService.getVehicle(this.vehicle.id));

    forkJoin(sources).subscribe(data => {
          if (this.vehicle.id)
             this.Vehicle= data[0];
});

Код API:

  getMakes() {
    return this.http.get('/api/makes')
      .map(res => res.json());
  }

Поскольку я использую Angular7 Я изменил код API на это:

  getVehicle(id){
    return this.http.get<any>('api/vehicles/'+id);
  }

И это сработало как шарм.Но теперь он изменил код для использования моделей (копия моделей, используемых в API) следующим образом:

    vehicle: SaveVehicle = {
    id:0,
    makeId: 0,
    modelId: 0,
    isRegistered: false,
    features: [],
    contact: {
      name: '',
      email: '',
      phone: '',
    }
  };


ngOnInit() {

    var sources =[]; //I omitted the other properties

    if(this.vehicle.id)    
      sources.push(this.vehicleService.getVehicle(this.vehicle.id));

    forkJoin(sources).subscribe(data => {

          if (this.vehicle.id)
             this.setVehicle(data[0]);
});


    private setVehicle(vehicle: Vehicle) {
        this.vehicle.id = vehicle.id;
        this.vehicle.makeId = vehicle.make.id;
        this.vehicle.modelId = vehicle.model.id;
        this.vehicle.isRegistered = vehicle.isRegistered;
        this.vehicle.contact = vehicle.contact;
        this.vehicle.features = _.pluck(vehicle.features,'id');   
      }

Когда я изменил метод, эта строка

this.setVehicle(data[0]);

бросаетисключение:

Аргумент типа 'any []' не может быть назначен параметру типа 'Vehicle'.У типа 'any []' отсутствуют следующие свойства из типа 'Vehicle': id, модель, марка, isRegistered и т. Д.

Я изменил тип возврата вызова API на Vehicle, он работаетно тогда я больше не могу использовать массив sources , потому что другие Observables в массиве имеют разные типы.Должен ли я использовать любой в качестве возврата вызова API?Есть ли способ сохранить массив источников при изменении типа возвращаемого значения на Транспортные средства?Могу ли я разыграть из "любого" в Транспортное средство?

В одном вопросе: Что мне здесь делать?

Answer 1

Предполагая, что у вас есть интерфейс Транспортного средства следующим образом (или аналогичный):

export interface Vehicle {
  id: number;
  makeId: number;
  modelId: number;
  isRegistered: boolean;
  features: [];
  contact: {};
}

Измените метод get следующим образом:

constructor(private http: HttpClient) { }

getVehicle(id){
  return this.http.get<Vehicle>('api/vehicles/'+id);
}

getVehicles(){
  return this.http.get<Vehicle[]>('api/vehicles');
}

Это отобразит ответ в формеодно транспортное средство или массив Транспортных средств.

Обязательно используйте httpClient (новый в 4.3 ish), а не старый http.

Кроме того, вам не нужен код, подобныйthis:

private setVehicle(vehicle: Vehicle) {
    this.vehicle.id = vehicle.id;
    this.vehicle.makeId = vehicle.make.id;
    this.vehicle.modelId = vehicle.model.id;
    this.vehicle.isRegistered = vehicle.isRegistered;
    this.vehicle.contact = vehicle.contact;
    this.vehicle.features = _.pluck(vehicle.features,'id');   
  }

Определите вашу модель, чтобы она соответствовала форме и именам из ответа.

В качестве альтернативы, сопоставьте данные из одной структуры с другой в http.get:

getVehicle(id): Observable<Vehicle> {
  return this.http.get<any>('api/vehicles/'+id).pipe(
    map(v => ({                       
       id: v.id,
       makeId: v.make.id,
       modelId: v.model.id,
       isRegistered: v.isRegistered,
       contract: v.contract;
       features: _.pluck(v.features,'id')
    })
  );
}

Приведенное выше сопоставляет входящий ответ (определенный как тип any) с автомобилем, как определено интерфейсом.

ПРИМЕЧАНИЕ. Приведенное выше сопоставление НЕ проверялось синтаксисом!

ТАКЖЕ ПРИМЕЧАНИЕ: здесь круглые скобки требуются круглые скобки:

v => ( { 
   ... 
})

Поскольку в противном случае компилятор считает, что мы определяем блок операторов вместо литерала возвращаемого объекта.