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

Es ist möglich, ein Mitglied zu einem bestehenden Objekt hinzuzufügen, indem man

1. Erweiterung des Typs (sprich: Erweiterung/Spezialisierung der Schnittstelle)
2. das ursprüngliche Objekt in den erweiterten Typ umwandeln

3. das Mitglied zum Objekt hinzufügen

   interface IEnhancedPromise<T> extends Promise<T> { sayHello(): void; }

   const p = Promise.resolve("Peter");

   const enhancedPromise = p as IEnhancedPromise<string>;

   enhancedPromise.sayHello = () => enhancedPromise.then(value => console.info("Hello " + value));

   // eventually prints "Hello Peter" enhancedPromise.sayHello();

Answer 2

Die beste Praxis ist die sichere Schreibweise, die ich Ihnen empfehle:

interface customObject extends MyObject {
   newProp: string;
   newProp2: number;
}

Answer 3

Erweiterung der Lösung von @jmvtrinidad für Angular,

Wenn Sie mit einem bereits vorhandenen typisierten Objekt arbeiten, können Sie auf diese Weise eine neue Eigenschaft hinzufügen.

let user: User = new User();
(user as any).otherProperty = 'hello';
//user did not lose its type here.

Wenn Sie nun Folgendes verwenden möchten otherProperty in der Html-Seite benötigen Sie Folgendes:

<div *ngIf="$any(user).otherProperty">
   ...
   ...
</div>

Angular Compiler behandelt $any() als eine Besetzung der any Typ, genau wie in TypeScript, wenn eine <any> o as any verwendet wird.

Answer 4

Speichern Sie jede neue Eigenschaft für jede Art von Objekt, indem Sie sie in 'any' umwandeln:

var extend = <any>myObject;
extend.NewProperty = anotherObject;

Später können Sie es abrufen, indem Sie Ihr erweitertes Objekt auf "any" zurückführen:

var extendedObject = <any>myObject;
var anotherObject = <AnotherObjectType>extendedObject.NewProperty;

Answer 5

einem Objekt in TypeScript dynamisch Eigenschaften zuweisen.

Dazu müssen Sie nur die Typescript-Schnittstellen wie folgt verwenden:

interface IValue {
    prop1: string;
    prop2: string;
}

interface IType {
    [code: string]: IValue;
}

Sie können es so verwenden

var obj: IType = {};
obj['code1'] = { 
    prop1: 'prop 1 value', 
    prop2: 'prop 2 value' 
};