Skip to content

Vue mit TypeScript verwenden

Ein Typsystem wie TypeScript kann viele häufige Fehler durch statische Analyse vor Build-Zeit erkennen. Dadurch verringert sich das Risiko von Laufzeitfehlern in der Produktion, und gleichzeitig können wir Code in großen Anwendungen sicherer und mit mehr Vertrauen refaktorisieren. TypeScript verbessert außerdem die Entwicklerfreundlichkeit durch typspezifische Autovervollständigung in IDEs und Code-Editoren.

Vue ist selbst in TypeScript geschrieben und bietet erstklassige Unterstützung für TypeScript. Alle offiziellen Vue-Pakete enthalten gebündelte Typdeklarationen, die sofort einsatzbereit sein sollten.

Projekt - Setup

create-vue, das offizielle Projekt-Scaffolding-Tool, Vite-powered, bietet die Möglichkeit ein Vue-Projekt mit Vite und TypeScript-Unterstützung zu erstellen.

Übersicht

Bei einem Vite-basierten Setup führen der Entwicklungsserver und der Bundler nur die Transpilation durch und übernehmen keine Typüberprüfung. Dies stellt sicher, dass der Vite-Entwicklungsserver auch bei der Verwendung von TypeScript extrem schnell bleibt.

  • Während der Entwicklung empfehlen wir, auf eine gute IDE-Konfiguration zu setzen, um sofortiges Feedback bei Typfehlern zu erhalten.

  • Wenn du SFCs verwendest, nutze das vue-tsc Tool für die Typüberprüfung und die Generierung von Typdeklarationen über die Kommandozeile. vue-tsc ist ein Wrapper um tsc, die eigene Kommandozeilen-Schnittstelle von TypeScript. Es funktioniert größtenteils genauso wie tsc unterstützt jedoch zusätzlich Vue SFCs neben TypeScript-Dateien. Du kannst vue-tsc im Watch-Modus parallel zum Vite-Entwicklungsserver ausführen oder ein Vite-Plugin wie vite-plugin-checker verwenden, das die Überprüfungen in einem separaten Worker-Thread ausführt.

  • Vue CLI bietet ebenfalls TypeScript-Unterstützung, wird jedoch nicht mehr empfohlen. Siehe die Hinweis.

IDE-Unterstützung

  • Visual Studio Code (VS Code) wird aufgrund seiner hervorragenden, sofort verfügbaren Unterstützung für TypeScript stark empfohlen.

    • Vue - Official (früher Volar) ist die offizielle VS Code-Erweiterung, die TypeScript-Unterstützung innerhalb von Vue SFCs bietet, zusammen mit vielen anderen großartigen Funktionen.

      TIP

      Die offizielle Vue-Erweiterung ersetzt Vetur, unsere frühere offizielle VS Code-Erweiterung für Vue 2. Wenn du Vetur derzeit installiert hast, stelle sicher, dass du es in Vue 3-Projekten deaktivierst.

  • WebStorm bietet ebenfalls Unterstützung für sowohl TypeScript als auch Vue. Auch andere JetBrains-IDEs unterstützen diese Technologien, entweder direkt oder über ein kostenloses plugin. Ab der Version 02.2023 bieten WebStorm und das Vue-Plugin integrierte Unterstützung für den Vue Language Server. Du kannst den Vue-Dienst so einstellen, dass er die Volar-Integration für alle TypeScript-Versionen verwendet, unter Einstellungen > Sprachen & Frameworks > TypeScript > Vue. Standardmäßig wird Volar für TypeScript-Versionen 5.0 und höher verwendet.

Konfigurieren von tsconfig.json

Projekte, die mit create-vue erstellt werden, enthalten eine vorab konfigurierte tsconfig.json. Die Basis-Konfiguration wird im @vue/tsconfig Paket abstrahiert. Innerhalb des Projekts verwenden wir Projekt-Referenzen, um die richtigen Typen für Code zu gewährleisten, der in verschiedenen Umgebungen läuft (z. B. sollte der Anwendungscode und der Testcode unterschiedliche globale Variablen haben).

Beim manuellen Konfigurieren von tsconfig.json gibt es einige bemerkenswerte Optionen:

Siehe auch:

Hinweis zu Vue CLI und ts-loader

In webpack-basierten Setups wie Vue CLI ist es üblich, die Typüberprüfung als Teil der Modul-Transformations-Pipeline durchzuführen, beispielsweise mit ts-loader. Dies ist jedoch keine saubere Lösung, da das Typsystem Wissen über das gesamte Modulnetzwerk benötigt, um Typüberprüfungen durchzuführen. Die Transformationsstufe eines einzelnen Moduls ist einfach nicht der richtige Ort für diese Aufgabe. Es führt zu den folgenden Problemen:

  • ts-loader kann nur den nach der Transformation erzeugten Code typisieren. Dies stimmt nicht mit den Fehlern überein, die wir in IDEs oder von vue-tsc, sehen, die direkt auf den Quellcode zurückgeführt werden.

  • Die Typüberprüfung kann langsam sein. Wenn sie im selben Thread/Prozess wie die Code-Transformationen durchgeführt wird, hat dies erhebliche Auswirkungen auf die Build-Geschwindigkeit der gesamten Anwendung

  • Wir haben bereits eine Typüberprüfung, die in unserer IDE in einem separaten Prozess läuft, daher ist der Leistungsabfall bei der Entwicklererfahrung einfach nicht gerechtfertigt.

Wenn du derzeit Vue 3 + TypeScript über Vue CLI verwendest, empfehlen wir dringend, auf Vite umzusteigen. Wir arbeiten auch an CLI-Optionen, um eine Transpilations-Only-TS-Unterstützung zu ermöglichen, damit du zu vue-tsc für die Typüberprüfung wechseln kannst.

Allgemeine Hinweise zur Nutzung

defineComponent()

Um TypeScript zu ermöglichen, die Typen korrekt innerhalb der Komponentenoptionen abzuleiten, müssen wir die Komponenten mit defineComponent() definieren:

ts
import { defineComponent } from 'vue'

export default defineComponent({
  // Typableitung aktiviert
  props: {
    name: String,
    msg: { type: String, required: true }
  },
  data() {
    return {
      count: 1
    }
  },
  mounted() {
    this.name // type: string | undefined
    this.msg // type: string
    this.count // type: number
  }
})

defineComponent() unterstützt auch die Ableitung der Props, die an setup() übergeben werden, wenn die Composition API ohne <script setup> verwendet wird:

ts
import { defineComponent } from 'vue'

export default defineComponent({
  // Typableitung aktiviert
  props: {
    message: String
  },
  setup(props) {
    props.message // type: string | undefined
  }
})

Siehe auch:

TIP

defineComponent() ermöglicht auch die Typableitung für Komponenten, die in einfachem JavaScript definiert sind.

Verwendung in Single-File Components

Um TypeScript in SFCs zu verwenden, füge das lang="ts"-Attribut zu den <script>-Tags hinzu. Wenn lang="ts" vorhanden ist, profitieren auch alle Template-Ausdrücke von strikterer Typüberprüfung.

vue
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      count: 1
    }
  }
})
</script>

<template>
  <!-- Typüberprüfung und Autovervollständigung aktiviert -->
  {{ count.toFixed(2) }}
</template>

lang="ts" kann auch mit <script setup> verwendet werden:

vue
<script setup lang="ts">
// TypeScript aktiviert
import { ref } from 'vue'

const count = ref(1)
</script>

<template>
  <!-- Typüberprüfung und Autovervollständigung aktiviert -->
  {{ count.toFixed(2) }}
</template>

TypeScript in Templates

Das <template> unterstützt auch TypeScript in Binding-Ausdrücken, wenn <script lang="ts"> oder <script setup lang="ts"> verwendet wird. Dies ist besonders nützlich, wenn in Template-Ausdrücken eine Typumwandlung erforderlich ist.

Hier ein konstruiertes Beispiel:

vue
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  <!-- Fehler, weil x auch ein string sein könnte -->
  {{ x.toFixed(2) }}
</template>

Dies kann mit einer Inline-Typumwandlung umgangen werden:

vue
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x as number).toFixed(2) }}
</template>

TIP

Wenn du Vue CLI oder eine webpack-basierte Umgebung verwendest, erfordert TypeScript in Template-Ausdrücken vue-loader@^16.8.0.

Verwendung mit TSX

Vue unterstützt auch das Erstellen von Komponenten mit JSX / TSX. Weitere Details findest du in der Render Function & JSX Anleitung.

Generic Components

Generische Komponenten werden in zwei Fällen unterstützt:

API-Spezifische Rezepte

Vue mit TypeScript verwenden has loaded