Wie weise ich einem Objekt in TypeScript dynamisch Eigenschaften zu?

Question

Wenn ich einem Objekt in Javascript programmatisch eine Eigenschaft zuweisen wollte, würde ich es so machen:

var obj = {};
obj.prop = "value";

In TypeScript erzeugt dies jedoch einen Fehler:

Die Eigenschaft 'prop' existiert nicht bei einem Wert vom Typ '{}'.

Wie soll ich einem Objekt in TypeScript eine neue Eigenschaft zuweisen?

Answer 1

Ich bin überrascht, dass sich keine der Antworten auf Object.assign bezieht, denn das ist die Technik, die ich immer verwende, wenn ich über "Komposition" in JavaScript nachdenke.

Und es funktioniert wie erwartet in TypeScript:

interface IExisting {
    userName: string
}

interface INewStuff {
    email: string
}

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

const objectWithAllProps: IExisting & INewStuff = Object.assign({}, existingObject, {
    email: "jsmith@someplace.com"
})

console.log(objectWithAllProps.email); // jsmith@someplace.com

Vorteile

• Typensicherheit durchgängig, weil Sie nicht die any überhaupt tippen
• verwendet TypeScripts Aggregat-Typ (bezeichnet durch die & bei der Deklaration des Typs von objectWithAllProps ), was deutlich macht, dass wir einen neuen Typ "on-the-fly" (d.h. dynamisch) komponieren

Zu beachtende Dinge

1. Object.assign hat seine eigenen einzigartigen Aspekte (die den meisten erfahrenen JS-Entwicklern gut bekannt sind), die beim Schreiben von TypeScript berücksichtigt werden sollten.
   • Sie kann auf veränderliche oder unveränderliche Weise verwendet werden (die unveränderliche Art habe ich oben demonstriert, was bedeutet, dass existingObject bleibt unangetastet und hat daher keine Auswirkung auf die email Eigentum. Für die meisten Programmierer im funktionalen Stil ist das eine gute Sache, da das Ergebnis die einzige neue Änderung ist.)
   • Object.assign funktioniert am besten, wenn Sie flache Objekte haben. Wenn Sie zwei verschachtelte Objekte kombinieren, die nichtigbare Eigenschaften enthalten, kann es passieren, dass Sie wahrheitsgemäße Werte mit undefinierten überschreiben. Wenn Sie auf die Reihenfolge der Object.assign-Argumente achten, sollte das kein Problem sein.

Answer 2

Eine weitere Möglichkeit ist der Zugriff auf die Eigenschaft als Sammlung:

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

Answer 3

Sie können ein neues Objekt auf der Grundlage des alten Objekts erstellen, indem Sie den Spreizungsoperator

interface MyObject {
    prop1: string;
}

const myObj: MyObject = {
    prop1: 'foo',
}

const newObj = {
    ...myObj,
    prop2: 'bar',
}

console.log(newObj.prop2); // 'bar'

TypeScript leitet alle Felder des ursprünglichen Objekts ab und VSCode übernimmt die automatische Vervollständigung usw.

Answer 4

Spät aber doch, einfache Antwort

let prop = 'name';
let value = 'sampath';
this.obj = {
   ...this.obj,
   [prop]: value
};

Answer 5

Können Sie dies verwenden:

this.model = Object.assign(this.model, { newProp: 0 });