Tutoriel pratique TypeScript + Vue3

Vue 3 offre un excellent support pour TypeScript. Ce tutoriel présente les pratiques de développement pour Vue 3 + TypeScript.

L'API Composition de Vue 3 et le système de types de TypeScript se combinent parfaitement, rendant le code plus sûr et plus facile à maintenir.

Voir le tutoriel Vue3 :https://www.example.com/vue3/vue3-tutorial.html

Diagramme SVG : développement Vue 3 + TypeScript 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

Pourquoi utiliser TypeScript dans Vue 3

Vue 3 a pleinement adopté TypeScript dès le début de sa conception, offrant un excellent support de types.

Le style fonctionnel de la Composition API s'accorde parfaitement avec le système de types TypeScript : ref prend en charge les génériques, computed bénéficie de l'inférence de type et les props bénéficient d'une vérification complète des types.

L'utilisation de TypeScript offre une protection de type aux props, aux événements et aux données réactives des composants Vue.

Vue 3 prend nativement en charge :Le code source de Vue 3 est écrit en TypeScript, ce qui assure une intégration transparente avec TypeScript.

Créer le projet

Utilisez Vite pour créer un projet Vue 3 avec prise en charge de TypeScript.

Initialisation

# Créer Vue avec Vite3 +Projet TypeScript (recommandé)
npm create vite@latest my-vue-app -- --template vue-ts

# Se placer dans le répertoire du projet
cd my-vue-app

# Installer les dépendances
npm install

Recommandation :Vite est l'outil de build officiellement recommandé pour Vue. Lors de la création d'un projet, sélectionnez simplement le template vue-ts.

Types de composants

Utilisez defineComponent et PropType pour définir les types de composant et de Props.

src/components/UserCard.vue

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

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

// Définir une interface de type utilisateur
interface User {
  id: number
  name: string
  email: string
}

export default defineComponent({
  name: 'UserCard',
  // Définition des props
  props: {
    // Utiliser PropType pour la déclaration de type
    user: {
      type: Object as PropType<User>,
      required: true
    }
  },
  // Déclarer les événements émis par le composant
  emits: ['edit'],
  setup(props, { emit }) {
    // Gérer le clic de modification
    const handleEdit = () => {
      emit('edit', props.user)
    }

    return { handleEdit }
  }
})
</script>

Résultat :

UserCard 组件渲染成功

PropType：Lorsque le type des props est un objet complexe, vous devez utiliser PropType pour l'assertion de type.

Types de la Composition API

Lorsque vous utilisez des API réactives telles que ref et computed, TypeScript fournit une prise en charge complète des types.

src/components/Counter.vue

<template>
  <div>
    <p>Compteur: {{ count }}</p>
    <p>Multiplier: {{ 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: définir des données réactives, spécifier le type avec des génériques
    const count = ref<number>(0)

    // computed: propriété calculée, infère automatiquement le type de retour
    const doubled = computed(() => count.value * 2)

    // Définir des méthodes
    const increment = () => {
      count.value++
    }

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

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

Résultat :

Counter 组件渲染成功

Inférence de type :L'API Composition de Vue 3 déduit automatiquement les types en fonction de la valeur initiale ; pour les types complexes, vous pouvez spécifier explicitement des génériques.

Définitions d'interfaces

Centralisez les interfaces de type du projet dans le répertoire types.

src/types/index.ts

// Définition du type User
export interface User {
  id: number       // ID utilisateur
  name: string    // Nom d'utilisateur
  email: string   // E-mail
  avatar?: string // Avatar (facultatif)
}

// Objet de transfert de données pour la création d'un utilisateur
export interface CreateUserDTO {
  name: string    // Nom d'utilisateur
  email: string  // E-mail
  password: string⟧// Mot de passe // Password
}

// Type de réponse API générique
export interface ApiResponse<T> {
  success: boolean  // Indique si l'opération a réussi
  data?: T         // Données en cas de succès
  error?: string   // Message d'erreur en cas d'échec
}

Gestion centralisée des types :Placez les définitions de types dans le répertoire types pour faciliter leur réutilisation dans plusieurs composants.

Notes

  • defineComponent：Fournit une inférence de type complète
  • PropType：Les types de Props complexes doivent l'utiliser
  • ref générique :Spécifiez explicitement les types complexes
  • emits：Déclarez les types d'événements

Bonnes pratiques :Vue 3 recommande d'utiliser l'API Composition + TypeScript pour la meilleure expérience de développement.

Résumé

Vue 3 et TypeScript se combinent parfaitement.

  • defineComponent：Obtenez une inférence de type complète
  • PropType：Fournissez une sécurité de type pour les props
  • ref：Spécifiez les types réactifs avec des paramètres génériques
  • computed：Déduire automatiquement les types des propriétés calculées

Suggestions :TypeScript est fortement recommandé pour les projets Vue 3, en particulier dans les grandes applications.

Autres extensions