Configurer TypeScript dans les projets Vue
vite.config.ts, tsconfig.json, vue-tsc, lang='ts' dans les SFC et prise en charge de TypeScript par l’IDE
Configurer TypeScript dans les projets Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
TypeScript dans Vue 3
Vue 3 a été réécrit en TypeScript et offre donc une excellente prise en charge du typage. Un projet correctement configuré détecte les bogues lors de la compilation et fournit une excellente complétion automatique de l’éditeur dans les fichiers .vue.
Mise en place avec TS
Le démarrage le plus simple consiste à utiliser create-vue, qui vous demande si vous souhaitez ajouter TypeScript et configure tsconfig.json, vue-tsc ainsi que les outils appropriés.
npm create vue@latest
# select "Add TypeScript? Yes"Les bases de tsconfig.json
Le fichier tsconfig.json contrôle la compilation. Le réglage le plus important pour détecter les bogues est le mode strict.
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext"
}
}Pourquoi le mode strict est important
strict: true active strictNullChecks, noImplicitAny et bien d’autres vérifications. Il vous oblige à gérer null/undefined et empêche les valeurs non typées de se faufiler.
Alias de chemin
L’alias @/ pointe vers votre dossier src, afin que les importations restent claires quelle que soit la profondeur du fichier. Configurez-le à la fois dans tsconfig.json et dans votre outil de regroupement.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}Utiliser l’alias
Désormais, les importations font référence aux modules depuis la racine du projet, plutôt qu’à des chaînes relatives ../../.
import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'TypeScript dans les SFC
Pour utiliser TypeScript dans un composant à fichier unique, ajoutez lang="ts" à la balise de script. Avec <script setup>, cela active les macros typées.
<script setup lang="ts">
const count: number = 0
</script>Vérifier les types des SFC
Le compilateur tsc habituel ne comprend pas les fichiers .vue. Vue fournit vue-tsc, un emballage qui vérifie conjointement les types des modèles et des scripts.
vue-tsc --noEmitAjouter un script de vérification
Ajoutez un script à package.json afin que l’intégration continue et vous-même puissiez vérifier les types avec une seule commande.
{
"scripts": {
"type-check": "vue-tsc --noEmit"
}
}Prise en charge de l’éditeur avec Volar
L’extension Volar (Vue - Official) pour VS Code fournit des fonctionnalités TypeScript dans les fichiers .vue : complétion automatique, accès à la définition et erreurs de type dans les modèles. Désactivez l’ancien outil Vetur pour éviter les conflits.
Mode de prise en charge
Volar peut fonctionner en mode de prise en charge, en remplaçant l’extension TS intégrée afin de gérer les fichiers .ts et .vue. Cela améliore les performances et la cohérence dans les projets volumineux.
Vérification rapide
Vérifiez vos connaissances sur la configuration de TypeScript.
Récapitulatif
Vous avez configuré TypeScript dans Vue :
- Activez le mode strict dans tsconfig.json pour obtenir les vérifications les plus rigoureuses.
- Configurez l’alias de chemin @/* vers src.
- Ajoutez lang="ts" aux scripts des SFC.
- Vérifiez les types avec vue-tsc --noEmit et utilisez l’extension Volar dans VS Code.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Configurer TypeScript dans les projets Vue » est-elle gratuite ?
Oui — le texte complet de « Configurer TypeScript dans les projets Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Configurer TypeScript dans les projets Vue » ?
vite.config.ts, tsconfig.json, vue-tsc, lang='ts' dans les SFC et prise en charge de TypeScript par l’IDE Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Configurer TypeScript dans les projets Vue » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer TypeScript dans les projets Vue
- Props et événements typés avec defineProps/defineEmits
- Typer les composables et les refs
- Composants Vue génériques