Интерфейс со свойством, которое имеет изменяющийся интерфейс

Question

Во-первых, ссылка на мой stackblitz: https://stackblitz.com/edit/angular-hnfgcx

Я написал более техническое описание моей проблемы в stackblitz, а также, пожалуйста, прочитайте это для любого разъяснения:)

Итакзаголовок может быть немного запутанным, но позвольте мне попытаться уточнить.

У меня есть базовый интерфейс для моих «предметов», который имеет 2 свойства:

id - уникальный идентификатор элемента -различный тип (CarInterface или HouseInterface)

Однако, когда я пытаюсь получить доступ к свойствам CarInterface или HouseInterface, тип не распознается.

Спасибо за ваше время!

Answer 1

В вашем примере listOfCars напечатано как ItemInterface[], которое имеет следующее определение:

export interface ItemInterface {
  id: number;
  item: CarInterface | HouseInterface;
}

TypeScript знает только, что item будет либо CarInterface, либо HouseInterface,но не знает какой.Так что вам придется сыграть:

const value = this.listOfCars.find(entry => (<CarInterface>entry.item).color === 'green');

Хотя этот дизайн кажется немного странным.Не похоже, что вам нужно смешивать машины и дома в одном списке или что-то в этом роде, поэтому вводить их как одно и то же может не понадобиться.Вы уверены, что вам не нужен общий интерфейс?Что-то вроде:

export interface ItemInterface<T> {
  id: number;
  item: T;
} 

public listOfCars: ItemInterface<CarInterface>[] = [];

Или, может быть, ItemInterface, который расширяют другие интерфейсы?

export interface ItemInterface {
  id: number;
} 

export interface CarInterface extends ItemInterface {
  color: string;
  doors: number;
} 

export interface HouseInterface extends ItemInterface {
  rooms: number;
  squareMeters: number;
}