TypeScript - Wie kann ich ein Array von Objekten definieren?

Ich erstelle ein Array von Objekten in TypeScript:

 userTestStatus xxxx = {
    "0": { "id": 0, "name": "Available" },
    "1": { "id": 1, "name": "Ready" },
    "2": { "id": 2, "name": "Started" }
 };

Kann mir jemand sagen, wie ich dessen Typ richtig deklarieren könnte? Ist es möglich, dies inline zu machen, oder bräuchte ich zwei Definitionen?

Ich möchte xxx durch eine Typdeklaration ersetzen, sodass TypeScript mich später warnt, wenn ich versehentlich etwas wie userTestStatus[3].nammme benutze.

Antwort #1

Es ist besser, ein natives Array anstelle eines Objekt-Literals mit zahlähnlichen Eigenschaften zu verwenden, damit die Nummerierung (sowie viele andere Array-Funktionen) sofort erledigt wird.

Wonach Sie hier suchen, ist eine Inline-Schnittstellendefinition für Ihr Array, die jedes Element in diesem Array definiert, egal ob es zunächst vorhanden ist oder später eingeführt wird:

let userTestStatus: { id: number, name: string }[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

userTestStatus[34978].nammme; // Error: Property 'nammme' does not exist on type [...]

Wenn Sie Ihr Array sofort mit Werten initialisieren, ist die explizite Typdefinition keine Notwendigkeit; TypeScript kann die meisten Elementtypen automatisch aus der Anfangszuweisung ableiten:

let userTestStatus = [
    { "id": 0, "name": "Available" },
    ...
];

userTestStatus[34978].nammme; // Error: Property 'nammme' does not exist on type [...]

Antwort #2

Was Sie oben haben, ist ein Objekt, kein Array.

Um ein Array zu erstellen, verwenden Sie [ & ], um Ihre Objekte zu umschließen.

userTestStatus = [
  { "id": 0, "name": "Available" },
  { "id": 1, "name": "Ready" },
  { "id": 2, "name": "Started" }
];

Abgesehen davon ist TypeScript eine Obermenge von JavaScript, sodass alles, was gültiges JavaScript ist, auch gültiges TypeScript sein wird, sodass keine weiteren Änderungen erforderlich sind.

Feedback-Klärung vom OP... benötigt eine Definition für das gepostete Modell

Sie können die hier definierten Typen verwenden, um Ihr Objektmodell darzustellen:

type MyType = {
    id: number;
    name: string;
}

type MyGroupType = {
    [key:string]: MyType;
}

var obj: MyGroupType = {
    "0": { "id": 0, "name": "Available" },
    "1": { "id": 1, "name": "Ready" },
    "2": { "id": 2, "name": "Started" }
};
// or if you make it an array
var arr: MyType[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

Antwort #3

Einige tslint-Regeln deaktivieren die Verwendung von [], Beispielnachricht: Array-Typ unter Verwendung von 'T[]' ist für nicht einfache Typen verboten. Verwenden Sie stattdessen 'Array<T>'.

Dann würdest du es so schreiben:

var userTestStatus: Array<{ id: number, name: string }> = Array(
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
);

Antwort #4

Array<T>

person: Array<{
  name: string;
  age: number;
}>

Antwort #5

Etwas alt, aber ich hatte das Gefühl, ich könnte dazu etwas Klarheit hinzufügen.

Exakte Antwort

    interface MyObject {
      id: number;
      name: string;
    }

    interface MyExactData {
      [key: string]: MyObject;
    }

    let userTestStatus: MyExactData = {
      "0": { "id": 0, "name": "Available" },
      "1": { "id": 1, "name": "Ready" },
      "2": { "id": 2, "name": "Started" }
    };

Aber das Obige ist nicht die übliche Art, wie wir ein Array von Objekten machen; man würde das einfache native Array in JavaScript verwenden.

    interface MyObject { // define the object (singular)
      id: number;
      name: string;
    }

    let userTestStatus_better: MyObject[] = [
      { "id": 0, "name": "Available" },
      { "id": 1, "name": "Ready" },
      { "id": 2, "name": "Started" }
    ];

Wenn wir einfach [] zu unserem Interface hinzufügen, wird die Typisierung für ein Array dieser Objekte bereitgestellt. Und das inline zu tun

    let userTestStatus_inline: {id:number, name:string}[] = [
      { "id": 0, "name": "Available" },
      { "id": 1, "name": "Ready" },
      { "id": 2, "name": "Started" }
    ];

Ich würde die Schnittstelle verwenden, da Sie etwas haben, das definierbar, verständlich und wiederverwendbar ist. Wenn Sie Änderungen vornehmen müssen, können Sie Änderungen an der einen Schnittstelle vornehmen und TypeScript wird Ihre Schnittstelle auf Code-Fehlanpassungen melden.

Antwort #6

Was Sie wirklich wollen, kann einfach eine Aufzählung sein

Wenn Sie nach etwas suchen, das sich wie eine Aufzählung verhält (weil ich sehe, dass Sie ein Objekt definieren und eine sequentielle ID 0, 1, 2 anhängen und ein Namensfeld enthalten, das Sie nicht falsch schreiben möchten (z. B. name vs naaame)), ist es besser, eine Aufzählung zu definieren, da die sequentielle ID automatisch verwaltet wird und Ihnen von Haus aus eine Typüberprüfung bietet.

enum TestStatus {
    Available,     // 0
    Ready,         // 1
    Started,       // 2
}

class Test {
    status: TestStatus
}

var test = new Test();
test.status = TestStatus.Available; // type and spelling is checked for you,
                                    // and the sequence ID is automatic

Die obigen Werte werden automatisch zugeordnet, z. B. „0“ für „Verfügbar“, und Sie können auf sie mit TestStatus.Available zugreifen. Und TypeScript wird den Typ erzwingen, wenn Sie diese weitergeben.

Wenn Sie darauf bestehen, einen neuen Typ als ein Array Ihres benutzerdefinierten Typs zu definieren

Du wolltest ein Array von Objekten (nicht genau ein Objekt mit den Schlüsseln "0", "1" und "2"), also definieren wir zuerst den Typ des Objekts und dann einen Typ des enthaltenen Arrays.

class TestStatus {
    id: number
    name: string

    constructor(id, name){
        this.id = id;
        this.name = name;
    }
}

type Statuses = Array<TestStatus>;

var statuses: Statuses = [
    new TestStatus(0, "Available"),
    new TestStatus(1, "Ready"),
    new TestStatus(2, "Started")
]