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

Um den vorherigen Typ beizubehalten, können Sie Ihr Objekt temporär in eine beliebige

  var obj = {}
  (<any>obj).prop = 5;

Die neue dynamische Eigenschaft wird nur verfügbar sein, wenn Sie die Besetzung verwenden:

  var a = obj.prop; ==> Will generate a compiler error
  var b = (<any>obj).prop; ==> Will assign 5 to b with no error;

Answer 2

Die einzige Lösung, die vollständig typsicher ist, ist diese ist aber ein wenig wortreich und zwingt Sie, mehrere Objekte zu erstellen.

Si usted muss Erstellen Sie zunächst ein leeres Objekt und wählen Sie dann eine der beiden Lösungen. Denken Sie daran, dass Sie jedes Mal, wenn Sie as verlieren Sie an Sicherheit.

Sicherere Lösung

Die Art der object es sicher innerhalb getObject was bedeutet object.a ist vom Typ string | undefined

interface Example {
  a: string;
  b: number;
}

function getObject() {
  const object: Partial<Example> = {};
  object.a = 'one';
  object.b = 1;
  return object as Example;
}

Kurze Lösung

Die Art der object es nicht sicher innerhalb getObject was bedeutet object.a ist vom Typ string noch vor seiner Abtretung.

interface Example {
  a: string;
  b: number;
}

function getObject() {
  const object = {} as Example;
  object.a = 'one';
  object.b = 1;
  return object;
}

Answer 3

Tun Sie dies einfach, und Sie können jede Eigenschaft hinzufügen oder verwenden. (Ich verwende die Typescript-Version als "typescript": "~4.5.5" )

let contextItem = {} as any;

Jetzt können Sie jede beliebige Eigenschaft hinzufügen und sie überall verwenden, z. B.

contextItem.studentName = "kushal";

Später können Sie es als verwenden:

console.log(contextItem.studentName);

Answer 4

Ich habe einen Artikel geschrieben, der genau dieses Thema behandelt:

Typescript - Erweitern eines Objekts und seines Typs zur Laufzeit

https://tech.xriba.io/2022/03/24/typescript-enhance-an-object-and-its-type-at-runtime/

Vielleicht könnten Sie sich von Typescript-Konzepten wie diesem inspirieren lassen:

• Zugeordnete Typen
• Tasten-Remapping über as
• Kreuzungstypen

Answer 5

Wenn Sie Typescript verwenden, wollen Sie vermutlich die Typsicherheit nutzen; in diesem Fall sind naked Object und 'any' kontraindiziert.

Besser ist es, nicht Object oder {}, sondern einen benannten Typ zu verwenden; oder Sie verwenden eine API mit spezifischen Typen, die Sie um Ihre eigenen Felder erweitern müssen. Ich habe festgestellt, dass dies funktioniert:

class Given { ... }  // API specified fields; or maybe it's just Object {}

interface PropAble extends Given {
    props?: string;  // you can cast any Given to this and set .props
    // '?' indicates that the field is optional
}
let g:Given = getTheGivenObject();
(g as PropAble).props = "value for my new field";

// to avoid constantly casting: 
let k = getTheGivenObject() as PropAble;
k.props = "value for props";