Introduction

Vous êtes peut-être déjà familiarisé avec la programmation orientée objet dans Vue.js et avez utilisé l’API de composition pour construire vos composants. Mais avez-vous déjà exploré les fonctionnalités de TypeScript dans votre application Vue ? Dans ce chapitre, nous allons présenter les fondements du TypeScript et montrer comment l’utiliser avec la Composition API.

Pourquoi utiliser le TypeScript ?

Le JavaScript est un langage faiblement typé, ce qui signifie que vous pouvez assigner n’importe quel type de données à une variable sans erreur. Par exemple :

const one = 1;
const two = 'two';

Cependant, cela peut conduire à des erreurs difficiles à détecter lorsque votre code devient plus complexe. Le TypeScript est un langage superset du JavaScript qui ajoute des fonctionnalités de typage statique pour empêcher ces types d’erreurs.

Qu’est-ce que le TypeScript ?

Le TypeScript a été créé en 2012 par Microsoft et est désormais maintenu par la communauté. Il est conçu pour :

• Améliorer la lisibilité du code
• Prévenir les erreurs de programmation courantes
• Réduire le temps et l’effort nécessaires pour développer des applications

Le TypeScript n’est pas un langage différent, mais une extension du JavaScript qui ajoute des fonctionnalités de typage statique. Les types sont vérifiés pendant la compilation (statiquement) au lieu de la phase d’exécution (dynammique).

Comment utiliser le TypeScript avec Vue ?

Pour créer un projet Vue avec TypeScript, vous pouvez utiliser l’outil CLI de Vue. Lorsque vous créez un nouveau projet avec vue create {name_of_project}, choisissez l’option « Type Script » pour activer la compilation TypeScript.

Si vous sélectionnez la version 3.x de Vue, assurez-vous de choisir une syntaxe de composant sans classe pour utiliser la Composition API.

Configuration du projet

Dans ce chapitre, nous allons travailler avec le code source d’un projet préconfiguré. Pour accéder au code source, vous pouvez télécharger les exemples ici. Dans le terminal, naviguez vers le répertoire typescript en utilisant la commande cd typescript.

Installez ensuite toutes les dépendances nécessaires avec npm install. Enfin, lancez l’application avec npm run start.

Éditeur de code

Nous recommandons d’utiliser l’édition Visual Studio Code pour développer votre application TypeScript. Cet éditeur fournit une configuration out-of-the-box pour le TypeScript et vous permettra d’utiliser des fonctionnalités comme la prise en charge de l’inference TypeScript.

Installez également les extensions suivantes :

• Vetur : aide à la prise en charge de l’inference TypeScript dans vos composants Vue
• ESLint VSCode : intégration d’ESLint pour détecter les erreurs et les warnings directement dans votre éditeur

Conclusion

Dans ce chapitre, nous avons présenté les fondements du TypeScript et montré comment utiliser le langage avec la Composition API. Nous vous recommandons de poursuivre vos études en explorant plus en profondeur les fonctionnalités de TypeScript.

N’hésitez pas à partager vos questions ou vos commentaires sur les réseaux sociaux.