Vue 3 mit Typescript Tutorial - So startest Du

🎬 Einführung in Vue 3 und TypeScript

Du möchtest Vue 3 mit TypeScript erlernen? Diese Kombination bringt fantastische Vorteile und wird Deine Effizienz enorm verbessern! Vue.js ist ein schnelles und leichtgewichtiges JavaScript-Framework zum Aufbau von Benutzeroberflächen. TypeScript hingegen ist eine stark typisierte Erweiterung deines vertrauten JavaScript-Code. Es macht den Code lesbarer, fehlerfreier und einfacher zu warten.

Beginnen wir unser Abenteuer jetzt!

🔑 Voraussetzungen

Damit du Vue 3 und TypeScript effizient nutzen kannst, solltest du die Grundlagen von JavaScript und Vue.js kennen. Keine Sorge, wenn du TypeScript vorher noch nie verwendet hast, wir werden darüber im Laufe dieses Tutorials sprechen. Als Entwicklungs-Tool nutze ich Visual Studio Code, Du kannst aber gerne jedes Textbearbeitungsprogramm Deiner Wahl verwenden. Eine Installation von Node.js und dem npm-Paketmanager auf Deinem System ist jedoch erforderlich.

🚀 Erstellen einer Vue 3-Anwendung mit TypeScript

Wir beginnen damit, dass wir das Vue CLI (Command Line Interface) installieren. Dazu gibst Du diesen Befehl in Dein Terminal ein:

npm install -g @vue/cli

Das "-g" in diesem Code steht dafür, dass Vue CLI global auf Deinem System installiert wird, damit wir es von überall aus verwenden können.

Lass uns nun überprüfen, ob Vue CLI korrekt installiert wurde:

vue --version

Wenn alles gut gelaufen ist, wird jetzt die installierte Version von Vue CLI angezeigt.

Lassen uns jetzt unsere Vue-App erstellen! Gib im Terminal den Befehl ein:

vue create hello-vue3

Hier erstellen wir eine neue Vue3-Anwendung namens "hello-vue3". Du kannst den Namen natürlich nach Belieben ändern.

Vue CLI wird Dich durch ein Setup leiten. Wähle die Option "Manually select features" und mache dann folgende Auswahl:

Babel, TypeScript, Router, Linter

Stelle sicher, dass du bei "Use class-style component syntax?" die Option "No" wählst. Bei "Use Babel alongside TypeScript?" wähle "Yes".

Hurra! Du hast jetzt Dein erstes Vue-3-Projekt mit TypeScript erstellt.

👋 Sagen wir Hallo zur Welt

Öffne die Datei "HelloWorld.vue" in Deinem Projekt und ändere den das Script wie folgt:

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

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

Dann ersetze in dem Template-Block "Welcome to Your Vue.js App" durch {{ msg }}. Deine geänderte HelloWorld.vue sollte jetzt so aussehen:

<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>

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

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

🏃 Lass uns die App starten

Gehe zu Deinem Terminal und führe den folgenden Befehl aus, um die Anwendung zu starten:

npm run serve

Öffne Deinen Browser und gehe zu localhost:8080, um Deine Vue.js-Anwendung in Aktion zu sehen! Du wirst eine Begrüßungsnachricht auf Deinem Bildschirm sehen.

💪 Vorteile von Vue 3 und TypeScript

Die Kombination von Vue 3 und TypeScript bringt zahlreiche Vorteile mit sich, die deine Entwicklungsarbeit auf ein neues Level heben:

• Typ-Sicherheit: TypeScript erkennt Fehler bereits während der Entwicklung und nicht erst zur Laufzeit. Das spart wertvolle Debugging-Zeit.
• Bessere IDE-Unterstützung: Durch die Typisierung erhältst du verbesserte Code-Vervollständigung und Dokumentation direkt in deiner Entwicklungsumgebung.
• Composition API: Vue 3 führt die Composition API ein, die besonders gut mit TypeScript harmoniert und eine modulare, wiederverwendbare Codestruktur ermöglicht.
• Verbesserte Performance: Vue 3 ist von Grund auf neu geschrieben und bietet signifikante Performance-Verbesserungen gegenüber Vue 2.
• Bessere Wartbarkeit: Typ-Definitionen machen den Code selbstdokumentierend und erleichtern die Zusammenarbeit im Team.

🔍 Ein tieferer Blick in TypeScript mit Vue

TypeScript und Vue 3 ergänzen sich perfekt. Hier ein kleines Beispiel, wie du mit Typen in deinen Vue-Komponenten arbeiten kannst:

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

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

export default defineComponent({
  name: 'UserProfile',
  setup() {
    const user = ref<User>({
      id: 1,
      name: 'Max Mustermann',
      email: 'max@example.com',
      isActive: true
    });

    const updateUserStatus = (status: boolean): void => {
      user.value.isActive = status;
    };

    return {
      user,
      updateUserStatus
    }
  }
})
</script>

Mit diesem Ansatz definierst du klar die Struktur deiner Daten und TypeScript wird dich warnen, wenn du versuchst, auf nicht existierende Eigenschaften zuzugreifen oder Werte falschen Typs zuzuweisen.

🧩 Die Composition API verstehen

Eine der größten Neuerungen in Vue 3 ist die Composition API. Sie bietet eine Alternative zur Options API und verbessert die Organisation deines Codes, besonders in komplexen Komponenten:

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'

export default defineComponent({
  name: 'TaskList',
  props: {
    projectId: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    // Reaktive Zustände
    const tasks = ref<Task[]>([]);
    const isLoading = ref(true);

    // Berechnete Eigenschaften
    const completedTasks = computed(() => {
      return tasks.value.filter(task => task.completed);
    });

    // Methoden
    const loadTasks = async () => {
      isLoading.value = true;
      try {
        // Hier würdest du deine API aufrufen
        // tasks.value = await api.getTasks(props.projectId);
      } catch (error) {
        console.error('Fehler beim Laden der Aufgaben:', error);
      } finally {
        isLoading.value = false;
      }
    };

    // Lebenszyklus-Hooks
    onMounted(() => {
      loadTasks();
    });

    // Rückgabe der Werte, die im Template verwendet werden sollen
    return {
      tasks,
      isLoading,
      completedTasks,
      loadTasks
    }
  }
})
</script>

Die Composition API macht deinen Code modularer und ermöglicht eine bessere Wiederverwendbarkeit von Logik zwischen Komponenten.

🔮 Ausblick: Die nächsten Schritte

Jetzt, wo du die Grundlagen kennst, hier einige Ideen, wie du deine Vue 3 und TypeScript-Kenntnisse vertiefen kannst:

1. Composables erstellen: Lerne, wie du wiederverwendbare Funktionen mit der Composition API erstellst.
2. Pinia einsetzen: Entdecke Pinia, den neuen offiziellen State-Management-Store für Vue, der TypeScript vollständig unterstützt.
3. Vue Router mit TypeScript: Integriere Routing in deine Anwendung mit vollständiger Typ-Unterstützung.
4. Testing: Lerne, wie du deine Vue 3-Komponenten mit Jest oder Vitest testen kannst.
5. Vite kennenlernen: Probiere Vite als moderne Build-Tool-Alternative zum Vue CLI aus, die eine blitzschnelle Entwicklungsumgebung bietet.

Ein Beispiel für ein Composable mit TypeScript:

// useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue: number = 0) {
  const count = ref(initialValue)
  
  const increment = () => {
    count.value++
  }
  
  const decrement = () => {
    count.value--
  }
  
  const isPositive = computed(() => count.value > 0)
  
  return {
    count,
    increment,
    decrement,
    isPositive
  }
}

// Verwendung in einer Komponente:
// import { useCounter } from '@/composables/useCounter'
// const { count, increment, decrement, isPositive } = useCounter(10)

🌐 Ein Blick in die Praxis

In der realen Welt werden große Vue-Projekte oft mit folgender Struktur aufgebaut:

src/
├── assets/              # Statische Assets (Bilder, Fonts, etc.)
├── components/          # Wiederverwendbare UI-Komponenten
│   ├── common/          # App-übergreifende Komponenten
│   └── feature/         # Featurespezifische Komponenten
├── composables/         # Wiederverwendbare Composition-Funktionen
├── layouts/             # Layout-Komponenten (Header, Footer, etc.)
├── router/              # Vue Router Konfiguration
├── stores/              # Pinia Stores
├── types/               # TypeScript Typ-Definitionen
├── utils/               # Hilfsfunktionen
└── views/               # Seitenkomponenten

Diese Struktur hilft dir, deine Anwendung sauber zu organisieren und den Code besser zu verwalten, wenn das Projekt wächst.

🎉 Glückwunsch! Du bist am Ziel!

Ich hoffe, dieses Tutorial hat Dir geholfen, den Einstieg in die Arbeit mit Vue 3 und TypeScript zu finden. Es gibt noch viel zu lernen, aber Du bist jetzt bereit und gut ausgestattet, um Deine eigene Vue.js- und TypeScript-Anwendung zu erstellen. Frohes Codieren 👩‍💻!

📚 Weiterführende Ressourcen

Hier sind einige wertvolle Ressourcen, die dir helfen können, deine Vue 3 und TypeScript-Kenntnisse zu vertiefen:

• Die offizielle Vue 3 Dokumentation
• Die TypeScript Dokumentation
• Das Awesome Vue Repository mit einer Sammlung nützlicher Bibliotheken und Ressourcen
• Pinia - Das offizielle State Management für Vue
• Vite - Das moderne Build-Tool für Frontend-Entwicklung

➡️ Vue JS Onlinekurs jetzt starten!

Denke daran, dass die Kombination von Vue 3 und TypeScript dir erlaubt, robustere und wartbarere Anwendungen zu erstellen. Die anfängliche Lernkurve mag etwas steiler sein, aber die langfristigen Vorteile machen diesen Aufwand mehr als wett.

Viel Erfolg bei deinen zukünftigen Projekten!