webentwicklung-frage-antwort-db.com.de

Wie verwende ich TypeScript mit Vue.js und einzelnen Dateikomponenten?

Ich habe im ganzen Web nach einem minimalen, funktionierenden Beispiel eines Vue.js + TypeScript-Setups gesucht. Wie bei "modernen JavaScript-Stapeln" üblich, sind die meisten dieser Tutorials entweder veraltet, obwohl sie erst vor wenigen Monaten geschrieben wurden oder abhängig von einem sehr spezifischen Setup. Es scheint kein allgemeines, überprüfbares Beispiel zu geben, auf das man bauen kann.

Hier sind einige der Ressourcen, die ich in Betracht gezogen habe:

Die grundlegende Vorlage, die ich verwende, ist die, die durch Ausführen von vue-cli init webpack mit allen Standardoptionen bereitgestellt wird. Da dies eine Menge Code erzeugt, füge ich hier nicht alles ein. Wenn Sie konkrete Auszüge benötigen, werde ich die Frage gerne aktualisieren.

Die offizielle Vue.js-Dokumentation ist für meinen Zweck unbrauchbar, da TypeScript nicht mit SFCs eingerichtet wird. Das letzte, was ich ausprobiert habe, war das letzte auf der Liste. Ich habe das Setup genau verfolgt, aber es läuft auf npm run dev der folgende Fehler:

[tsl] ERROR in /Users/[REDACTED]/ts-test/src/main.ts(12,3)
      TS2345: Argument of type '{ el: string; router: any; template: string; components: { App: { name: string; }; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
  Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.

Kann jemand etwas Licht darauf werfen, warum dies geschieht und wie es gelöst werden kann? Besser noch, ich würde mich sehr über ein kurzes, minimales, schrittweises Beispiel für das Einrichten einer funktionierenden Vue.js + TypeScript-Konfiguration mit der Vorlage webpack freuen.

Ich habe bereits mehrere Client-Projekte mit Vanilla JavaScript in der Produktion in Vue.js erfolgreich abgeschlossen, aber dieses TypeScript-Tooling in Kombination mit Vue.js verwirrt mich einfach.

15
herrbischoff

Ich habe versucht, TypeScript mit vue zu verwenden. Meine persönliche Meinung: Es funktioniert nicht gut. Da einige vue-Interna für TypeScript nicht geeignet sind:

  1. vuex mit this.$store.dispatch('some_action')
  2. Vue.use, Vue.mixin und andere ähnliche Dinge, die die globale Vue-Instanz verändern

Während meiner Recherche habe ich jedoch folgende wundervolle Beispiele gefunden: TypeScript-vue-Tutorial von Daniel Rosenwasser und TypeScript-Vue-Starter von Microsoft.

Ich habe auch versucht, vue-webpack-template mit TypeScript von mir selbst nachzuahmen: https://github.com/sobolevn/wemake-vue-template

Es gibt auch nette Werkzeuge, um Ihren Workflow TypeScript + vue zu verbessern:

Am Ende habe ich mich für flow entschieden. Überprüfen Sie diese Projektvorlage wenn Sie interessiert sind. 

7
sobolevn

update

Im September 2018 sollte der neue vue-cli mit dem TypeScript Plugin getestet werden.


Absolut zustimmen @ sobolevns Meinung. Es gibt jedoch eine Menge Informationen, die ich beurteilen kann. Die Unterstützung der Community für TypeScript lohnt das Warten.

Das Ökosystem von Vue ist mehr TypeScript:

  1. *.vue-Datei wird TypeScript in VSCode unterstützt. Schauen Sie sich diese Ausgabe an vetur .

  2. Open Source Ökosystem.

  3. Neuer vue-cli im Design. Klick mich

Wenn Sie also Zeit haben zu warten, können Sie vorübergehend einige Zeit beobachten. Sie können auch auf diese Projekte verweisen: TypeScript-Vue-Starter und Eine Webpack-Vorlagengabel mit TypeScript-Unterstützung .

6
fimars

Dies sieht aus wie die neueste vue-cli-Vorlage mit einer erheblichen Anzahl von Sternen und Unterstützung für vue 2.5.

Ich glaube nicht, dass ich es in den anderen Antworten ausdrücklich erwähnt habe

vue init ducksoupdev/vue-webpack-TypeScript my-project

https://github.com/ducksoupdev/vue-webpack-TypeScript

3
tiberriver256

Mit den neuesten Versionen von VueJS ist es möglich, mit Vue, TypeScript & JSX ein zuverlässiges und wartbares Projekt zu erstellen. Ich habe eine Boilerplate für Starter erstellt unter Vue.TSX

1
tejzpr