TypeScript + Vue3 Praxis-Tutorial

Vue 3 bietet hervorragende Unterstützung für TypeScript. Dieses Tutorial stellt Entwicklungspraktiken für Vue 3 + TypeScript vor.

Die Composition API von Vue 3 und das Typsystem von TypeScript ergänzen sich perfekt, wodurch der Code sicherer und einfacher zu pflegen ist.

Vue3-Tutorial ansehen:https://www.example.com/vue3/vue3-tutorial.html

SVG-Diagramm: Vue 3 + TypeScript-Entwicklung Background Title Vue 3 + TypeScript type support Vue 3 components Vue 3 components defineComponent() PropType<User> emits: ['edit', 'delete'] Composition API Composition API ref<T>(initial) computed<T>(() => {}) reactive<T>(obj) Type definitions Type definitions interface User { id: number name: string } Lower section: Advantages Advantages of Vue 3 + TypeScript Advantage 1 Complete type inference Advantage 2 Props type checking Advantage 3 Emits event types Arrow marker

Warum TypeScript in Vue 3 verwenden

Vue 3 hat TypeScript von Anfang an vollständig integriert und bietet hervorragende Typunterstützung.

Der funktionale Stil der Composition API funktioniert perfekt mit dem TypeScript-Typsystem: ref unterstützt Generics, computed hat Typinferenz und Props haben vollständige Typprüfung.

Die Verwendung von TypeScript bietet Typschutz für Vue-Komponenten-Props, Events und reaktive Daten.

Vue 3 unterstützt nativ:Der Quellcode von Vue 3 ist in TypeScript geschrieben und bietet nahtlose Integration mit TypeScript.

Projekt erstellen

Verwenden Sie Vite, um ein Vue-3-Projekt mit TypeScript-Unterstützung zu erstellen.

Initialisierung

# Vue mit Vite erstellen3 +TypeScript-Projekt (empfohlen)
npm create vite@latest my-vue-app -- --template vue-ts

# In das Projektverzeichnis wechseln
cd my-vue-app

# Abhängigkeiten installieren
npm install

Empfehlung:Vite ist das offiziell empfohlene Build-Tool für Vue. Wählen Sie beim Erstellen eines Projekts einfach die Vorlage vue-ts aus.

Komponententypen

Verwenden Sie defineComponent und PropType, um Komponenten- und Props-Typen zu definieren.

src/components/UserCard.vue

<template>
  <div class="user-card">
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
    <button @click="handleEdit">Bearbeiten</button>
  </div>
</template>

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

// Benutzer-Typ-Interface definieren
interface User {
  id: number
  name: string
  email: string
}

export default defineComponent({
  name: 'UserCard',
  // Props-Definition
  props: {
    // PropType für Typdeklaration verwenden
    user: {
      type: Object as PropType<User>,
      required: true
    }
  },
  // Von der Komponente emittierte Events deklarieren
  emits: ['edit'],
  setup(props, { emit }) {
    // Klick zum Bearbeiten behandeln
    const handleEdit = () => {
      emit('edit', props.user)
    }

    return { handleEdit }
  }
})
</script>

Ergebnis:

UserCard 组件渲染成功

PropType：Wenn der Typ der Props ein komplexes Objekt ist, müssen Sie PropType für die Typzusicherung verwenden.

Composition-API-Typen

Bei der Verwendung reaktiver APIs wie ref und computed bietet TypeScript vollständige Typunterstützung.

src/components/Counter.vue

<template>
  <div>
    <p>Anzahl: {{ count }}</p>
    <p>Multiplizieren: {{ doubled }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

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

export default {
  setup() {
    // ref: reaktive Daten definieren, den Typ mit Generics angeben
    const count = ref<number>(0)

    // computed: berechnete Eigenschaft, leitet den Rückgabetyp automatisch ab
    const doubled = computed(() => count.value * 2)

    // Methoden definieren
    const increment = () => {
      count.value++
    }

    const decrement = () => {
      count.value--
    }

    return { count, doubled, increment, decrement }
  }
}
</script>

Ergebnis:

Counter 组件渲染成功

Typinferenz:Die Composition API von Vue 3 leitet Typen automatisch auf Grundlage des Anfangswerts ab; für komplexe Typen kannst du Generics explizit angeben.

Interface-Definitionen

Zentralisiere die Typinterfaces des Projekts im types-Verzeichnis.

src/types/index.ts

// Benutzertypdefinition
export interface User {
  id: number       // Benutzer-ID
  name: string    // Benutzername
  email: string   // E-Mail
  avatar?: string // Avatar (optional)
}

// Datenübertragungsobjekt zum Erstellen eines Benutzers
export interface CreateUserDTO {
  name: string    // Benutzername
  email: string  // E-Mail
  password: string // Passwort
}

// Generischer API-Antworttyp
export interface ApiResponse<T> {
  success: boolean  // Ob erfolgreich
  data?: T         // Daten bei Erfolg
  error?: string   // Fehlermeldung bei Fehler
}

Zentralisierte Typverwaltung:Lege Typdefinitionen im types-Verzeichnis ab, um sie einfach über mehrere Komponenten hinweg wiederverwenden zu können.

Hinweise

  • defineComponent：Bietet vollständige Typinferenz
  • PropType：Komplexe Props-Typen müssen verwendet werden
  • ref generisch:Komplexe Typen explizit angeben
  • emits：Ereignistypen deklarieren

Best Practices:Vue 3 empfiehlt die Verwendung von Composition API + TypeScript für die beste Entwicklungserfahrung.

Zusammenfassung

Vue 3 und TypeScript lassen sich perfekt kombinieren.

  • defineComponent：Vollständige Typinferenz erhalten
  • PropType：Typsicherheit für Props bieten
  • ref：Reaktive Typen mit generischen Parametern angeben
  • computed：Automatische Ableitung von computed-Eigenschaftstypen

Empfehlungen:TypeScript wird für Vue-3-Projekte dringend empfohlen, insbesondere in großen Anwendungen.

Weitere Erweiterungen