Vue + TypeScript: Eine Traumpaarung in Ihrem Code Editor

Vue ist gerade extrem beliebt und ich habe schon länger überlegt, ein ernsthaftes Projekt damit umzusetzen. Als sich die Gelegenheit bot, habe ich sofort zugeschlagen. Aber es gab ein kleines Problem – eine der Anforderungen des Projekts war, es in TypeScript zu schreiben. Anfangs war ich ziemlich gestresst, wie ich diese Kombination angehen sollte, aber vue-cli hat es mir sehr leicht gemacht.

Ich würde lügen, wenn ich sagen würde, dass diese Reise super reibungslos verlief. Es gab Frustrationen, stundenlanges Anstarren des Bildschirms und einige Fauststöße gegen meinen Schreibtisch, aber nachdem ich nun über einen Monat mit Vue + TypeScript gearbeitet habe, kann ich sagen, dass es sich gelohnt hat – und wenn ich eine weitere App mit Vue coden müsste, würde ich es nicht ohne TypeScript tun.

Voraussetzungen

Dieser Artikel befasst sich mit der Kombination von Vue und TypeScript und setzt ein grundlegendes Wissen über beide voraus. Wenn Sie noch keine Gelegenheit hatten, damit zu spielen und neugierig sind, hat Vue eine tolle Anleitung, und die TypeScript-Dokumentation ist ein großartiger Ausgangspunkt.

Wir müssen vue-cli global installiert haben, damit wir schnell Vue-Projekte erstellen können. Installieren Sie vue-cli, indem Sie den folgenden Befehl in Ihrem Terminal ausführen

npm install -g @vue/cli

Sobald wir das installiert haben, sind wir startklar. Wenn Sie TypeScript noch nicht installiert haben, müssen wir das nicht vorher tun, da vue-cli das erledigt, wenn Sie ein neues Projekt starten und dort TypeScript auswählen.

Erste Schritte

Nachdem wir vue-cli installiert haben, müssen wir nur noch vue create ausführen, um ein Projekt mit Vue + TypeScript zu starten. Wählen Sie während der Erstellung eines neuen Projekts TypeScript aus, und wir sind startklar.

vue create <app-name>

Hier ist das Ergebnis, sobald unser Projekt hochgefahren ist

vue-cli bietet uns auch die Möglichkeit, Babel zusammen mit TypeScript für Polyfills, CSS-Präprozessoren, Linter, Unit-Testing-Bibliotheken (ich habe Jest gewählt, go Jest!) sowie andere Konfigurationen auszuwählen. Sie können Ihre Auswahl sogar in einem Preset speichern, um sie später für ein anderes Projekt zu verwenden.

Hier ist eine Übersicht über die nützlichen Fragen, die Ihnen zur Konfiguration des Projekts gestellt werden

Eine Sache, die ich erwähnen möchte, ist, dass vue-cli 3.0 über eine Benutzeroberfläche verfügt, die die Erstellung eines neuen Projekts noch einfacher macht. Führen Sie vue ui im Terminal aus und vue-cli öffnet eine UI, in der Sie ein neues Projekt einrichten können.

Was ist im Paket enthalten?

Nachdem vue-cli fertig ist, erhalten wir eine schöne Verzeichnisstruktur unserer App mit allen bereits erledigten Einstellungen.

• tsconfig.json: Dies ist alles eingerichtet und wir können es bearbeiten, um es an unsere Anforderungen anzupassen.
• shims-vue.d.ts: Diese Shims sind bereits eingerichtet, um TypeScript beim Importieren von .vue-Dateien (Single File Components) zu helfen, diese zu verstehen.
• vue-property-decorator: Wenn Sie klassenbasierte Komponenten verwenden möchten, fügt vue-cli dieses Plugin hinzu, damit wir alle Arten von Decorators verwenden können. Dies ist sehr praktisch und macht den Code lesbarer.
• Klassenkomponenten: Wenn Sie sich dafür entscheiden, bereitet vue-cli die Bühne für Sie vor. Beachten Sie, dass Sie immer noch Router-Hooks registrieren müssen, damit Klassenkomponenten diese auflösen können.

Sass-Setup

Eine Sache, die ich einrichten musste und die ich mir gewünscht hätte, wäre von Anfang an dabei gewesen, sind gemeinsame Sass-Partials. Um meine Sass-Variablen und Mixins in jeder Komponente zu importieren, musste ich sie in vue.config.js laden. shared.scss ist die Datei, die alle Variablen und Mixins exportiert, die in der App verwendet werden.

Hier ist mein Ergebnis mit meiner Sass-Konfiguration

chainWebpack: (config) => {
   config
     .module
     .rule('vue')
     .uses
     .get('vue-loader')
     .tap(({ loaders, loaders: { scss }, ...options }) => ({
       ...options,
       loaders: {
         ...loaders,
         scss: [
           ...scss,
           {
             loader: 'sass-resources-loader',
             options: {
               resources: [
                 './src/styles/shared.scss',
               ],
             },
           },
         ],
       },
     }));

Vue Property Decorator

Das Paket vue-property-decorator stellt Vue-Eigenschaften zur Verfügung und macht sie als Decorators nutzbar. In meiner Anwendung habe ich schließlich nur @Component, @Prop, @Watch verwendet, aber es gibt auch andere wie @Emit, @Inject und @Model, die Ihren Code bei extensiver Nutzung viel wortreicher machen.

Vuex

Vuex hat Typisierungen… genug gesagt! Vuex unterstützt auch TypeScript, und das wusste ich anfangs gar nicht. Ich begann nach geeigneten Wegen zu suchen, Vuex mit TypeScript zu kombinieren und stieß auf Alex Jover Morales‘ Egghead.io-Kurs über Vue.js State Management mit Vuex und TypeScript. Er half mir, den richtigen Weg für die Verwaltung des Vuex-Status bei der Verwendung von TypeScript zu verstehen.

Zum Beispiel:

// actions.ts
import { ActionTree } from 'vuex';
import { RootState, ModuleState } from '@/types';


const actions: ActionTree<ModuleState, RootState> = {
  // all your actions go here
};

Vuex-class

Das ist noch etwas, von dem ich nicht wusste, dass es existiert, als ich anfing, aber jetzt wünschte, ich hätte es früher gefunden. Ich habe Getter für fast alles erstellt, aber das fühlte sich nicht richtig an. Ich begann nach besseren Wegen zu suchen und fand einen interessanten Artikel von Francesco Vitullo, der einige Dinge für mich klärte. Dort entdeckte ich vuex-class, das Decorators für alle Vuex-Mapper bereitstellt.

Anstatt also einen neuen Getter zu schreiben, nur um auf eine Eigenschaft im State zuzugreifen, könnte ich Folgendes tun:

import {
  State,
} from 'vuex-class'

@Component
export class MyComp extends Vue {
  @State(state => state.bar) stateBar
}

Entwicklungserfahrung mit VS Code

Mit TypeScript ist die Codierungserfahrung in VS Code viel besser. Es gibt kein Hin und Her mehr, um zu prüfen, welche Mutations-Typen ich in mutation-types.ts deklariert habe, da VS Code diese erkennen und während der Eingabe korrekte Vorschläge machen kann.

Das Gleiche gilt für die Änderung des States in Mutationen – mit TypeScript weiß der Editor, wie Ihre State-Struktur aussieht und schlägt die richtigen Eigenschaften vor.

Wenn Sie VS Code verwenden, empfehle ich dringend die Verwendung des Vetur-Plugins, da es Vue-Tooling bietet und mit anderen Extras wie Syntaxhervorhebung (funktioniert hervorragend mit Vue Single File Components) und Linting direkt einsatzbereit ist.

Abschließende Gedanken

Wie alles andere im JavaScript-Ökosystem hat Vue + TypeScript noch einen langen Weg vor sich. Zum Beispiel konnte ich vuelidate nicht verwenden, da es keine Typisierungen hat. Aber glücklicherweise bot vee-validate einen Workaround, sodass ich nicht den schwierigen Weg gehen musste, diese selbst zu schreiben.

Zusammenfassend lässt sich sagen, dass ich die Entwicklungserfahrung als wesentlich reibungsloser empfand und VS Code ein völlig anderes Biest ist, wenn man mit TypeScript arbeitet. Ich muss die Vorzüge von Vue nicht wirklich besingen – es ist sehr einfach, es zu erlernen und mit dem Aufbau zu beginnen und spart Tage, die man damit verbringt, sich in die inneren Abläufe eines Frameworks einzuarbeiten.