TypeScript avec Vue.js

Bienvenue au Laboratoire Quantique NOVA LAB ! An 2087 - les systèmes de la station spatiale exigent la plus grande précision. La moindre erreur sur un type de données pourrait mener à une catastrophe. C'est pourquoi nos ingénieurs utilisent TypeScript - un système de types statiques qui détecte les erreurs avant même l'exécution du code.

Pourquoi TypeScript avec Vue ?

TypeScript est un sur-ensemble de JavaScript qui ajoute des types statiques. Combiné à Vue 3, il nous apporte :

• L'autocomplétion dans l'éditeur de code (IntelliSense)
• La détection des erreurs avant le lancement de l'application
• Une meilleure documentation - les types décrivent la forme des données
• Le refactoring - l'éditeur comprend la structure du code

Créer un projet Vue avec TypeScript

Créer un projet Vue avec TypeScript est simple grâce à Vite :

1npm create vite@latest nova-lab -- --template vue-ts

Vite configure automatiquement TypeScript et crée un fichier tsconfig.json :

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "moduleResolution": "bundler",
6    "strict": true,
7    "jsx": "preserve",
8    "paths": {
9      "@/*": ["./src/*"]
10    }
11  },
12  "include": ["src/**/*.ts", "src/**/*.vue"]
13}

L'attribut lang="ts"

Dans un SFC Vue (Single File Component), on ajoute lang="ts" au bloc <script setup> :

1<script setup lang="ts">
2import { ref } from 'vue'
3
4const stationName = ref<string>('NOVA LAB')
5const crewCount = ref<number>(42)
6const isOnline = ref<boolean>(true)
7</script>

Sans lang="ts", Vue traite le code comme du JavaScript standard. Avec lang="ts", le compilateur TypeScript vérifie les types et détecte les erreurs.

Les types de base dans Vue

1<script setup lang="ts">
2import { ref } from 'vue'
3
4// Types simples
5const name: string = 'Mars Station'
6const year: number = 2087
7const active: boolean = true
8
9// Tableaux
10const modules: string[] = ['Lab', 'Hangar', 'Bridge']
11const temperatures: number[] = [-63, -58, -71]
12
13// Ref avec type générique
14const status = ref<string>('operational')
15const energy = ref<number>(98.5)
16</script>

TypeScript infère automatiquement les types, donc tu n'es pas toujours obligé de les spécifier explicitement :

1const count = ref(0)       // ref<number> - inféré automatiquement
2const label = ref('test')  // ref<string> - inféré automatiquement

Le typage explicite est utile quand le type ne peut pas être inféré :

1const data = ref<string | null>(null)  // peut être une chaîne ou null

Les interfaces TypeScript

Les interfaces définissent la forme des objets :

1interface CrewMember {
2  id: number
3  name: string
4  role: string
5  active: boolean
6}
7
8const engineer: CrewMember = {
9  id: 1,
10  name: 'Dr. Nova',
11  role: 'Chief Engineer',
12  active: true
13}

1<script setup lang="ts">
2import { ref } from 'vue'
3
4// Types de base
5const stationName = ref<string>('NOVA LAB')
6const crewCount = ref<number>(42)
7const isOnline = ref<boolean>(true)
8
9// Interface
10interface CrewMember {
11  id: number
12  name: string
13  role: string
14  active: boolean
15}
16
17// Tableau typé
18const crew = ref<CrewMember[]>([
19  { id: 1, name: 'Dr. Nova', role: 'Commander', active: true },
20  { id: 2, name: 'Atlas', role: 'Navigator', active: true },
21  { id: 3, name: 'Echo', role: 'Engineer', active: false }
22])
23
24// Type union
25const status = ref<'online' | 'offline' | 'maintenance'>('online')
26
27function toggleStatus() {
28  const states: Array<'online' | 'offline' | 'maintenance'> = ['online', 'offline', 'maintenance']
29  const idx = states.indexOf(status.value)
30  status.value = states[(idx + 1) % states.length]
31}
32</script>
33
34<template>
35  <div class="nova-lab">
36    <h1>{{ stationName }}</h1>
37    <p>Crew: {{ crewCount }} | Status: <span :class="status">{{ status }}</span></p>
38    <button @click="toggleStatus" class="btn">Toggle status</button>
39
40    <h2>Crew</h2>
41    <div v-for="member in crew" :key="member.id" class="card">
42      <strong>{{ member.name }}</strong> - {{ member.role }}
43      <span :class="member.active ? 'active' : 'inactive'">
44        {{ member.active ? 'Active' : 'Inactive' }}
45      </span>
46    </div>
47  </div>
48</template>
49
50<style scoped>
51.nova-lab {
52  background: #0a0e27;
53  color: #00ff88;
54  min-height: 100vh;
55  padding: 20px;
56  font-family: monospace;
57}
58h1 { color: #00ff88; margin-bottom: 5px; }
59h2 { color: #00b4d8; margin-top: 20px; }
60.btn {
61  background: #00b4d8;
62  color: white;
63  border: none;
64  padding: 8px 16px;
65  border-radius: 8px;
66  cursor: pointer;
67  margin: 10px 0;
68}
69.card {
70  background: rgba(0, 180, 216, 0.1);
71  border: 1px solid #00b4d8;
72  padding: 12px 16px;
73  margin: 6px 0;
74  border-radius: 8px;
75  display: flex;
76  justify-content: space-between;
77  align-items: center;
78}
79.online { color: #00ff88; }
80.offline { color: #e74c3c; }
81.maintenance { color: #f39c12; }
82.active { color: #00ff88; font-size: 12px; }
83.inactive { color: #e74c3c; font-size: 12px; }
84</style>