Vue avec TypeScript : guide complet

Pourquoi Vue avec TypeScript : guide complet ?

Vue avec TypeScript offre une meilleure type-sécurité, autocomplétion et gestion des erreurs au niveau de la compilation, ce qui améliore significativement l'expérience du développeur.

Un cas d'utilisation concret serait le développement d'une application web complexe où les erreurs potentiellement difficiles à déboguer peuvent être prévues dès la compilation, en utilisant des types stricts et des interfaces définies.

Prerequis

• Connaissance de base de Vue.js (1.x ou 2.x)
• Familiarité avec TypeScript
• Node.js v10.0.0+
• npm v6.0.0+

Concepts fondamentaux

1. Projet Vue avec TypeScript

npm install -g @vue/cli
vue create mon-projet-ts

Choisissez l'option "Manuel" et activez "TypeScript".

2. Configuration de base

Dans le fichier tsconfig.json, vous pouvez configurer des options pour votre projet TypeScript.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

3. Déclaration de Composants

<template>
  <div>
    message
  </div>
</template>

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

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

4. Utilisation de Types et Interfaces

interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: 'John Doe'
};

5. Propotypes avec TypeScript

<script lang="ts">
import { defineComponent } from 'vue';
import UserCard from './UserCard.vue';

export default defineComponent({
  components: {
    UserCard
  },
  props: {
    user: {
      type: Object as () => User,
      required: true
    }
  }
});
</script>

Mise en pratique : projet fil rouge

Projet : Mini Gestionnaire de Tâches

1. Initialisation du projet

vue create task-manager
cd task-manager
npm install typescript vue-class-component vuex --save

2. Création d'un composant TaskList.vue

<template>
  <div>
    <h1>Tasks</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">task.title</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import TaskService from '@/services/TaskService';

interface Task {
  id: number;
  title: string;
}

export default defineComponent({
  setup() {
    const tasks = ref<Task[]>([]);

    async function fetchTasks() {
      try {
        tasks.value = await TaskService.getTasks();
      } catch (error) {
        console.error('Error fetching tasks:', error);
      }
    }

    fetchTasks();

    return { tasks };
  }
});
</script>

3. Création d'un service TaskService.ts

// src/services/TaskService.ts
import axios from 'axios';

const API_URL = 'http://localhost:3000/tasks';

class TaskService {
  static async getTasks(): Promise<Task[]> {
    try {
      const response = await axios.get(API_URL);
      return response.data;
    } catch (error) {
      throw new Error('Error fetching tasks');
    }
  }
}

export default TaskService;

4. Ajout d'une route dans router/index.ts

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import TaskList from '../views/TaskList.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/tasks',
    name: 'TaskList',
    component: TaskList
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

5. Ajout du composant à App.vue

<template>
  <router-view />
</template>

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

export default defineComponent({
  name: 'App'
});
</script>

Erreurs frequentes et debugging

Erreur 1 : Prop non défini

// ❌ Mauvais
props: {
  message: String
}
// ✅ Correct
props: {
  message: {
    type: String,
    required: true
  }
}

Erreur 2 : Mauvaise utilisation de ref

// ❌ Mauvais
const tasks = ref();

// ✅ Correct
const tasks = ref<Task[]>([]);

Erreur 3 : Utilisation incorrecte de async/await

// ❌ Mauvais
fetchTasks() {
  TaskService.getTasks().then(tasks => {
    this.tasks = tasks;
  });
}

// ✅ Correct
async function fetchTasks() {
  try {
    const tasks = await TaskService.getTasks();
    this.tasks = tasks;
  } catch (error) {
    console.error('Error fetching tasks:', error);
  }
}

Pour aller plus loin

1. Comprendre les Hooks de Vue : Vue Composition API
2. Utiliser Vuex pour le State Management : Vuex Documentation
3. Intégrer des Tests Unitaires avec Jest : Jest Vue Guide

Défi pratique

Créez une application simple de gestion d'utilisateurs qui utilise Vuex pour le state management et TypeScript pour la type-sécurité.