Почему при присваивании свойству возникает ошибка "невозможно установить свойство null"

Question

Я пытаюсь присвоить какое-то значение некоторому свойству объекта.Но консоль зарегистрировала ошибку ERROR TypeError: Cannot set property 'requested_date' of null.Я пытался найти, что не так, но я думаю, что все в порядке.

Вот код:

form = {
    data: null as IMediaStorageAdd,
    requester: null as string
}

IMediaStorageAdd представляет собой интерфейс:

export interface IMediaStorageAdd {
    place: string;
    requested_date: any;
    temp_requested_date: any;
    details: any[];
}

и вот где я запускаю assignemnt:

ngOnInit() {
    this.form.requester = localStorage.getItem(`name`);
    this.form.data.requested_date = new Date();
    /* resulting error Cannot set property 'requested_date' of null */
}

Answer 1

Ответ Sajeetharan правильный, и он работает.Я попытаюсь пролить немного света, чтобы прояснить ваши сомнения.

Вы устанавливаете this.form.data в null и типизируете его, используя интерфейс, но все же this.form.data имеет значение null, а не объект.

Я полагаю, что вы можете скомпилировать TS с --strictNullChecks, чтобы избежать этой путаницы, чтобы избежать присвоения нулю или неопределенности чему-либо.

В любом случае, в вашем случае, я думаю, вы либо инициализируете свою форму, используяте же типы, что и вы ожидаете:

form = {
    data: {} as IMediaStorageAdd,
    requester: '' as string
}

или вам нужно инициализировать данные формы перед использованием:

1) Если есть класс, реализующий ваш интерфейс IMediaStorageAdd

ngOnInit() {
    this.form.requester = localStorage.getItem(`name`);
    // where class MediaStorageAdd implements IMediaStorageAdd
    this.form.data = new MediaStorageAdd();
    // this could be done in the class MediaStorageAdd constructor actually
    this.form.data.requested_date = new Date();
}

2) Если ни один класс не реализует ваш интерфейс IMediaStorageAdd, то вы должны сначала определить его как тип, а затем инициализировать данные формы, используя литерал объекта

export type TMediaStorageAdd {
    requested_date: any;
    place?: string;
    temp_requested_date?: any;
    details?: any[];
}

form = {
    data: null as TMediaStorageAdd,
    requester: null as string
}

ngOnInit() {
    this.form.requester = localStorage.getItem(`name`);
    this.form.data = {
        requested_date = new Date();
    }
}

Answer 2

Перед установкой запрошенной даты вам необходимо присвоить пустой объект свойству data формы.В противном случае данные имеют значение null и, следовательно, выдают ошибку.Чтобы исправить это,

добавьте строку перед тем, как установить значение требуемой даты как,

this.form.data = {};