Vue Academy · Lektion

TypeScript-Einrichtung in Vue-Projekten

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' in SFCs und TypeScript-Unterstützung in der IDE

Lektion 1 von 413 Schritte

TypeScript-Einrichtung in Vue-Projekten ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

TypeScript in Vue 3

Vue 3 wurde in TypeScript neu geschrieben und bietet daher eine hervorragende Typunterstützung. Ein gut konfiguriertes Projekt erkennt Fehler bereits zur Compile-Zeit und ermöglicht eine leistungsfähige Autovervollständigung im Editor für .vue-Dateien.

Projektgerüst mit TS

Der einfachste Einstieg ist create-vue. Dabei werden Sie gefragt, ob TypeScript hinzugefügt werden soll, und tsconfig.json, vue-tsc sowie die passende Toolchain werden eingerichtet.

npm create vue@latest
# select "Add TypeScript? Yes"

Grundlagen von tsconfig.json

tsconfig.json steuert die Kompilierung. Die wichtigste Einstellung zum Erkennen von Fehlern ist der Strict-Modus.

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

Warum der Strict-Modus wichtig ist

strict: true aktiviert strictNullChecks, noImplicitAny und weitere Prüfungen. Dadurch müssen Sie null/undefined behandeln, und nicht typisierte Werte können nicht unbemerkt durchrutschen.

Pfad-Aliase

Der Alias @/ verweist auf Ihren src-Ordner, sodass Importe unabhängig von der Verschachtelungstiefe der Datei übersichtlich bleiben. Konfigurieren Sie ihn sowohl in tsconfig.json als auch in Ihrem Bundler.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Den Alias verwenden

Jetzt verweisen Importe auf Module aus dem Projektstamm statt auf relative ../../-Ketten.

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

TypeScript in SFCs

Um TypeScript innerhalb einer Single-File-Komponente zu verwenden, fügen Sie dem Script-Tag lang="ts" hinzu. Zusammen mit <script setup> werden dadurch typisierte Makros verfügbar.

<script setup lang="ts">
const count: number = 0
</script>

SFCs typprüfen

Der reguläre tsc-Compiler versteht .vue-Dateien nicht. Vue stellt vue-tsc bereit, einen Wrapper, der Templates und Scripts gemeinsam auf Typfehler prüft.

vue-tsc --noEmit

Ein PrüfsScript hinzufügen

Fügen Sie package.json ein Script hinzu, damit CI und Sie die Typen mit einem einzigen Befehl überprüfen können.

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Editor-Unterstützung mit Volar

Die VS-Code-Erweiterung Volar (Vue - Official) bietet TypeScript-Unterstützung in .vue-Dateien: Autovervollständigung, „Gehe zu Definition“ und Typfehler in Templates. Deaktivieren Sie das alte Vetur, um Konflikte zu vermeiden.

Takeover-Modus

Volar kann im Takeover-Modus ausgeführt werden und ersetzt dabei die integrierte TS-Erweiterung, sodass es sowohl .ts- als auch .vue-Dateien verarbeitet. Das verbessert die Leistung und Einheitlichkeit in großen Projekten.

Schnelltest

Testen Sie Ihr Wissen zum TypeScript-Setup.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben TypeScript in Vue eingerichtet:

Aktivieren Sie den Strict-Modus in tsconfig.json, um die gründlichsten Prüfungen zu erhalten.
Konfigurieren Sie den @/*-Pfad-Alias auf src.
Fügen Sie den SFC-Scripts lang="ts" hinzu.
Prüfen Sie die Typen mit vue-tsc --noEmit und verwenden Sie die Volar-Erweiterung in VS Code.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „TypeScript-Einrichtung in Vue-Projekten“ kostenlos?

Ja — der vollständige Text von „TypeScript-Einrichtung in Vue-Projekten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „TypeScript-Einrichtung in Vue-Projekten“?

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' in SFCs und TypeScript-Unterstützung in der IDE Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „TypeScript-Einrichtung in Vue-Projekten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

TypeScript-Einrichtung in Vue-Projekten
Typisierte Props und Emits mit defineProps/defineEmits
Composables und Refs typisieren
Generische Vue-Komponenten

← Zurück zu Vue Academy