Как динамически назначить свойства объекту в TypeScript?

Эта решение полезно, когда ваш объект имеет конкретный тип. Например, когда вы получаете объект из другого источника.

let user: User = new User();
(user as any).otherProperty = 'hello';
// В данном случае у объекта user не теряется его тип.

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

В вашем коде создаётся объект obj, который становится динамическим, так как его тип задан как any. Затем вы добавляете в него свойство prop с значением 5. Вот как это выглядит на русском:

var obj: any = {}; // Создаем пустой объект
obj.prop = 5; // Добавляем свойство 'prop' с значением 5

Таким образом, в первой строке создаётся пустой объект, а во второй строке к этому объекту добавляется новое свойство prop, которому присваивается значение 5. Если вам нужно использовать строгую типизацию, рекомендуется задать более конкретный тип для объекта, а не использовать any.

Я удивлён, что ни один из ответов не упоминает Object.assign, поскольку это именно тот подход, который я использую всякий раз, когда думаю о "композиции" в JavaScript.

И это работает так, как ожидается, в TypeScript:

interface IExisting {
    userName: string
}

interface INewStuff {
    email: string
}

const existingObject: IExisting = {
    userName: "jsmith"
}

const objectWithAllProps: IExisting & INewStuff = Object.assign({}, existingObject, {
    email: "[email protected]"
})

console.log(objectWithAllProps.email); // [email protected]

Преимущества

• Безопасность типов на всех этапах, потому что вам не нужно использовать тип any.
• Использует агрегатный тип TypeScript (что показано с помощью & при объявлении типа objectWithAllProps), что явно указывает на то, что мы создаем новый тип на лету (то есть динамически).

На что стоит обратить внимание

1. Object.assign имеет свои уникальные особенности (которые известны большинству опытных разработчиков JS), которые стоит учитывать при написании TypeScript.
   • Его можно использовать как в режиме мутации, так и в неизменяемом (я демонстрирую неизменяемый способ выше, что означает, что existingObject остается нетронутым и, следовательно, не имеет свойства email. Для большинства программистов в функциональном стиле это хорошо, так как результат — это единственное новое изменение).
   • Object.assign работает лучше всего с более плоскими объектами. Если вы объединяете два вложенных объекта, содержащих свойства, допускающие значение null, вы можете случайно перезаписать истинные значения на undefined. Если вы будете следить за порядком аргументов Object.assign, то всё будет в порядке.

Хотя компилятор может выдавать предупреждения, код все равно должен работать как вы ожидаете. Вот пример, который сработает:

const s = {};
s['prop'] = true;

Этот код создает объект s и добавляет в него свойство prop со значением true.

Еще один способ сделать это — получить доступ к свойству как к коллекции:

var obj = {};
obj['prop'] = "value";