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

Fall 1:

var car = {type: "BMW", model: "i8", color: "white"};
car['owner'] = "ibrahim"; // You can add a property:

Fall 2:

var car:any = {type: "BMW", model: "i8", color: "white"};
car.owner = "ibrahim"; // You can set a property: use any type

Answer 2

Hier ist eine besondere Version von Object.assign die den Variablentyp bei jeder Eigenschaftsänderung automatisch anpasst. Zusätzliche Variablen, Typ-Assertions, explizite Typen oder Objektkopien sind nicht erforderlich:

function assign<T, U>(target: T, source: U): asserts target is T & U {
    Object.assign(target, source)
}

const obj = {};
assign(obj, { prop1: "foo" })
//  const obj now has type { prop1: string; }
obj.prop1 // string
assign(obj, { prop2: 42 })
//  const obj now has type { prop1: string; prop2: number; }
obj.prop2 // number

//  const obj: { prop1: "foo", prop2: 42 }

Anmerkung: Die Muster macht Gebrauch von TS 3.7 Behauptungsfunktionen . Der Rückgabetyp von assign es void im Gegensatz zu Object.assign .

Answer 3

Am einfachsten wird es folgendermaßen sein

const obj = <any>{};
obj.prop1 = "value";
obj.prop2 = "another value"

Answer 4

Da Sie dies nicht tun können:

obj.prop = 'value';

Wenn Ihr TS-Compiler und Ihr Linter nicht streng sind, können Sie dies schreiben:

obj['prop'] = 'value';

Wenn Ihr TS-Compiler oder -Linter strikt ist, wäre eine andere Lösung das Typecasting:

var obj = {};
obj = obj as unknown as { prop: string };
obj.prop = "value";

Answer 5

Um zu garantieren, dass der Typ ein Object (d.h. Schlüssel-Werte-Paare ), verwenden:

const obj: {[x: string]: any} = {}
obj.prop = 'cool beans'