Website-Suche

vuejs3 - Wie man optionale Daten in Vue 3 Typescript definiert

Ich habe Daten, die aus einer API in einer Vue 3 TypeScript-Codebasis kommen. Solange die Daten unterwegs sind, möchte ich wissen, dass sie fehlen. Derzeit mache ich es so:

data() {
  return {
    apiData: null as DataType | null
  }
},
async mounted() {
  this.apiData = await getData()
}

Das Problem besteht darin, dass die Definition des Typs von apiData: null as DataType | null umständlich ist und sich einfach falsch anfühlt. Ich habe keine Beispiele gesehen, wie man das richtig machen kann, außer einem solchen Cast.

Gibt es eine bessere Möglichkeit, eine Eigenschaft eines Objekts als optionalen Typ zu kennzeichnen? Ich kenne Schnittstellen, aber mein Objekt ist ein sehr komplexer Typ und diese optionalen Daten sind nur eine Eigenschaft davon...

Danke für die Hilfe!

Antwort #1

Dies ist wahrscheinlich das Beste, was Sie bekommen können, wie im Leitfaden Data Properties and Methods v3:

Diese [Daten]-Instanzeigenschaften werden nur hinzugefügt, wenn die Instanz erstmals erstellt wird, daher müssen Sie sicherstellen, dass sie alle im von der Datenfunktion zurückgegebenen Objekt vorhanden sind. Verwenden Sie gegebenenfalls null, undefined oder einen anderen Platzhalterwert für Eigenschaften, bei denen der gewünschte Wert noch nicht verfügbar ist.

Wenn Sie die Definition weniger umständlich machen möchten, könnten Sie immer ein Dienstprogramm wie opt<T>() => undefined als T | undefined oder type Opt<T>=T | undefined definieren.

data() {
  function opt<T>() { return undefined as T | undefined; }
  return {
    apiData: opt<DataType>(),
    foo: opt<Bar>(),
  }
},
async mounted() {
  this.apiData = await getData()
}

Das gesagt, wenn Sie bereit sind, eine weitere Indirektionsebene hinzuzufügen, könnten Sie Ihre optionalen Eigenschaften auf einer Partial<YourData>-Instanz installieren, die Sie in Ihrem data-Objekt halten. Da Vue den Zugriff auf „tief“ verschachtelte Eigenschaften proxyen kann, sollte dies Vue die Möglichkeit geben, auf das Hinzufügen/Löschen weiterer Eigenschaften zu reagieren, ohne sie im Vorfeld definieren zu müssen.

interface OptionalData {
  prop1: string;
  prop2: number;
  apiData: DataType;
}

data() {
  return {
    optionalData: {} as Partial<OptionalData>
  }
},
async mounted() {
  this.optionalData.apiData = await getData()
}

Natürlich kann Ihre Komponente schwer verständlich werden, wenn Sie auf das Vorhandensein oder Fehlen vieler optionaler Felder reagieren müssen. Wenn Sie feststellen, dass Sie dieses Muster häufig benötigen, könnte dies eine Gelegenheit sein, Ihre Komponente in mehrere kleinere Komponenten zu refaktorieren oder ein reichhaltigeres Modellobjekt zu erstellen, das einen Teil der Komplexität abstrahieren kann.

Verwandte Artikel