Website-Suche

TypeScript - Wie definiert man ein Interface für Objekte mit dynamischen Schlüsseln?


Ich habe ein Objekt wie dieses, das durch die _.groupBy()-Methode von Underscore erstellt wurde.

myObject = {
  "key" : [{Object},{Object2},{Object3}],
  "key2" : [{Object4},{Object5},{Object6}],
  ...
}

Wie würde ich das in TypeScript als Interface definieren? Ich möchte es nicht einfach als myObject:Object={ ... definieren, sondern einen eigenen Typ dafür haben.

Antwort #1

Ihr Objekt sieht aus wie ein Wörterbuch von Object-Arrays

interface Dic {
    [key: string]: Object[]
}

Die TypeScript-Literatur bezeichnet dieses Muster oft als „die Beschreibung eines indizierbaren Objekts“ mit einer allgemeinen Form

interface Dic {
    [key: string|number]: object_type
}

oder

type Dic = {
    [key: string|number]: object_type
}

Antwort #2

Es gibt jetzt einen speziellen Record-Typ in TypeScript:

const myObject: Record<string, object[]> = { ... }

Überlegen Sie auch, die Tasten wann immer möglich zu tippen:

type MyKey = 'key1' | 'key2' | ...

const myObject: Record<MyKey, object[]> = { ... }

Antwort #3

{ [x: string]: T }

und

Record<string, T>

normalerweise wird es für alle Ihre Ziele dienen. Allerdings bin ich an einen seltsamen Punkt gelangt, an dem nach einigen Typoperationen die erste Option mir sowohl [x: string] als auch [x: number] zurückgab, und ich konnte das Record nicht verwenden, da es eine rekursive Typoperation war und Typescript einen Fehler auswarf, dass mein rekursiver Typ nicht generisch war.

Also, nachdem ich den wirklich kleinen Record-Code untersucht habe, kam ich zu dieser Lösung, die mein komplexes Problem gelöst hat:

{ [P in string]: T }

Bearbeiten: Ich habe dies normalerweise auch in jedem Typescript-Code, den ich schreibe, in einer utils.ts-Datei:

export type obj<T = unknown> = Record<string, T>

Schneller und sauberer als ständig die Aufnahme zu verwenden.

z. B.

type MyObjectType = {
  propA: obj; // An object with unknown props
  propB: obj<number>; // An object with number props
}

Verwandte Artikel