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 umtsc
, die eigene Kommandozeilen-Schnittstelle von TypeScript. Es funktioniert größtenteils genauso wietsc
unterstützt jedoch zusätzlich Vue SFCs neben TypeScript-Dateien. Du kannstvue-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:
compilerOptions.isolatedModules
ist auftrue
gesetzt, weil Vite esbuild zum Transpilieren von TypeScript verwendet und es bestimmte Einschränkungen bei der Transpilation von Einzeldateien gibt.compilerOptions.verbatimModuleSyntax
ist ein superset vonisolatedModules
und eine ebenfalls gute Wahl – es wird auch im@vue/tsconfig
verwendet.Wenn du die Options-API verwendest, musst du
compilerOptions.strict
auftrue
setzen (oder zumindestcompilerOptions.noImplicitThis
, aktivieren, was Teil derstrict
Option ist), um die Typüberprüfung vonthis
in den Komponentenoptionen zu nutzen. Andernfalls wirdthis
alsany
behandelt.Wenn du Resolver-Aliasnamen in deinem Build-Tool konfiguriert hast, zum Beispiel der Standard-Alias
@/*
der in einemcreate-vue
Projekt konfiguriert ist, musst du dies auch in TypeScript übercompilerOptions.paths
konfigurieren.Wenn du TSX mit Vue verwenden möchtest, setze
compilerOptions.jsx
auf"preserve"
, undcompilerOptions.jsxImportSource
auf"vue"
.
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 vonvue-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:
- In SFCs:
<script setup>
mit demgeneric
-Attribut - Die Render-Funktion / JSX-Komponenten: Die Funktionssignatur von
defineComponent()