Многоразовые типы (интерфейсы) в angular 8

Question

Я пытаюсь создать повторно используемый интерфейс, который можно использовать для объекта того же типа. как UserDetails, в декларации.d.ts

declare module DataModel {
    interface UserDetails {
        userName: string;
        userId: number;
    }
}

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

В моем компоненте я создал новую переменную как ,

public userDetails: DataModel.UserDetails;

Примечание: я импортировал DataModel.

В ngOnInit () я пытаюсь установить значения для userDetails,

 ngOnInit() {
    this.userDetails.userName = "Guest";
  }

, но когда запускается код, я я получаю сообщение об ошибке,

Невозможно установить свойство 'userName' из неопределенного для переменной userDetails.

Я попытался добавить файл объявлений.d.ts в tsconfig. json в типе массив, но он не работает.

приветствуется любой обходной путь.

Answer 1

Объявление хорошее, но вы забыли инициализировать свою переменную, поэтому при ее использовании она undefined.

Я бы порекомендовал инициализировать ее как null, а затем выполнить присвоение:

public userDetails: DataModel.UserDetails = null;


ngOnInit() {
   this.userDetails = {
       userName: 'Guest',
       userId: 0,
   };
}

Обратите внимание, что вам нужно предоставить userId, или Typescript сообщит вам, что userId не определен во время вашего назначения.

Если вы не хотите указывать userId, объявите ваш интерфейс как:

declare module DataModel {
    interface UserDetails {
        userName: string;
        userId?: number;
    }
}

Или введите свой атрибут как:

public userDetails: Partial<DataModel.UserDetails>;

, что позволит каждому ключу UserDetails быть необязательным

---

Альтернатива

Вы можете инициализировать свои данные следующим образом:

public userDetails: DataModel.UserDetails = {
   userName: null,
   userId: 0,
};

Затем использовать их как:

ngOnInit() {
   this.userDetails.userName = 'Guest';
}