Website-Suche

javascript - Vue.js TypeScript-Schnittstelle funktioniert nicht

Weiß jemand, wie die Syntax ist, um einen Typ für Daten-Eigenschaften in vue.js zu erstellen (die Anwendung wird in TypeScript geschrieben)? Ich suche nach so etwas wie:

@Component({
  data() {
    return {
      sections: Array<SomeInterface> = []
    }
  }
})

Aber Vue sieht einen Typ als Wert und ich bin verwirrt, wie ich damit umgehen soll.

Antwort #1

Sie können : nicht wie gewohnt verwenden, um den Typ voranzustellen, da die Syntax mit der key: value-Objektsyntax von JavaScript in Konflikt steht. Sie können stattdessen einfach die Typinferenz verwenden, indem Sie das leere Array [] auf den Typ SomeInterface[] erzwingen:

@Component({
  data() {
    return {
      sections: [] as SomeInterface[]
    }
  }
})

Antwort #2

Sie sollten Klassenstil-Komponenten mit vue-class-component verwenden, die es Ihnen ermöglichen, diese Deklarationen zu Klassen-Eigenschaften zu verschieben und gut mit Typescript zusammenarbeiten.

import Vue from 'vue'
import Component from 'vue-class-component'

// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'

  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}

Verwandte Artikel