Utilisation d'une API REST avec Vue.js et TypeScript

Comment développer une simple application Vue.js (3) avec TypeScript qui utilise une API : c'est ce que nous voyons à la suite de l'épisode précédent dans lequel nous avions créé notre API REST avec Express et TypeScript. Cependant nous n'avions pas encore d'interface utilisateur pour nous servir de notre nouvelle API.

Avant de continuer ce tuto, je vous recommande vivement d'être à l'aise avec :

• JavaScript
• TypeScript
• Les méthodes HTTP
• Vue.js (si vous avez des connaissances dans un autre framework, cela peut suffire)
• Node.js et NPM (des bases suffisent)

Installation de notre projet

En suivant la documentation, nous créerons l'application avec Vite.js qui remplace maintenant Webpack dans la nouvelle version de Vue.

1. Dans votre terminal, entrez la commande :

npm create vite@latest

2. Entrez le nom de votre projet, ici je le nomme express-vue3
3. Choisissez vue
4. Choisissez vue-ts
5. Pour finir, nous installerons axios pour lancer nos appels API.

npm i axios

Types

Dans le tuto précèdent, nous avons défini des types TS pour nos animaux, nous allons les copier et les placer dans un dossier types à la racine du projet.

Customisation du projet

Une fois le projet créé, libre à vous de supprimer les fichiers dont vous n'avez pas besoin. Dans la suite du tuto, je développerai directement dans App.vue. À vous d'adapter selon votre cas d'usage.

Passons au code

Comme dans la première partie, je vous propose un projet CodeSandbox ainsi que des explication sur "quel fichier fait quoi" (en plus des commentaires dans le code).

Pour que la prévisualisation fonctionne, l'API REST doit tourner sur votre machine

Explications

Le dossier src

C'est ici que nous écrirons notre code source.

• main.ts est le fichier d'entrée de notre application. C'est lui qui va monter tout ce qui est nécessaire dans le DOM; c'est également ici que nous importons nos styles.

• env.d.ts, ce fichier de déclaration TS sert principalement à dire à notre éditeur que les fichiers .vue sont des composants Vue.js.

• App.vue, c'est dans ce fichier que nous développerons toute notre logique.

  Nous commençons par définir notre partie <script>, c'est ici que nous enverrons les requêtes et que nous sauvegarderons les informations de l'API.

  Vous remarquerez que les ref prennent un Generic TS pour expliciter le type de la ref; c'est une partie vraiment importante quand on travaille avec TypeScript.

  Nous récupérerons tous les animaux ainsi qu'un animal unique dans le hook onMounted.

  Ensuite, nous définissons des fonctions qui seront appelées par nos boutons pour mettre à jour, supprimer, et créer un animal.

  Dans la partie <template>, rien de compliqué. Nous affichons simplement les informations de l'API, ainsi que des boutons / formulaires pour interagir avec notre API. Si vous êtes à l'aise avec Vue.js, vous devriez vous y retrouver.

  Enfin la partie <style> est complètement optionnelle et ne sert qu'à rendre notre application visuellement potable 😄

Le dossier src/modules

C'est ici que nous définirons les différents fichiers, "modules", dont nous aurons besoin un peu partout.

• api.ts, ce fichier nous sert à préparer les requêtes avant de les envoyer. C'est une convention chez Alsacréations, cela nous permet de garder notre code DRY (Don't Repeat Yourself) et de debugger les requêtes plus facilement.

Le dossier src/styles

C'est ici que nous placerions les styles globaux de l'application, dans cet exemple je n'utilise que Tailwind (qui n'est pas du tout important pour la suite du tuto).

Le dossier public

Tout ce qui est placé dans ce dossier ne sera pas compilé et sera juste copié dans le dossier de destination. Concrètement, le serveur WEB qui fera tourner notre front-end ne fera que servir les fichiers originaux.

EX: https://mon-front-end.com/favicon.ico === public/favicon.ico

Conclusion

🥳 Félicitations, vous êtes arrivé au bout de ce tuto.

Finalement, utiliser Vue.js avec TypeScript n'a rien de compliqué si vous êtes déjà familier avec le framework.

Nous n'avons fait qu'annoter nos ref et les paramètres de nos fonctions... et le tour est joué !

En plus de ça, vous savez maintenant comment utiliser une API REST depuis votre application et ce, en quelques minutes !

Sur ce, je vous dis à la prochaine 👋