Définition de l'état de magasin avec TypeScript et Vue.js

Introduction

En tant que développeur, vous avez probablement déjà travaillé avec des applications qui utilisent un store pour stocker l’état de l’application. Mais comment définir la forme de cet état ? Comment garantir que les propriétés et les types sont corrects ? Dans cet article, nous allons explorer comment définir la forme de notre store en TypeScript, comment utiliser les génériques et comment éviter les pièges courants.

Définition de l’état du store

Avant tout, nous devons définir la forme de notre état. Pour ce faire, nous créons une interface qui décrit la structure de nos données :

interface Listing {
  id: string;
  title: string;
  description: string;
  image: string;
  address: string;
  price: number;
  numOfGuests: number;
  numOfBeds: number;
  numOfBaths: number;
  rating: number;
}

interface State {
  listings: Listing[];
  loading: boolean;
}

Nous avons maintenant une interface qui décrit la structure de notre état. Mais comment nous définir ce type sur notre objet d’état ?

Utilisation des génériques avec Vue

La fonction reactive() de Vue est générique et accepte un type variable. Ce type variable est utilisé pour décrire la forme de l’objet réactif créé. Pour utiliser les types que nous avons créés, nous passons notre interface State en tant que type variable :

const state = reactive<State>({
  listings: [],
  loading: false,
});

Maintenant, notre objet d’état est appropriement typé.

Définition des paramètres des fonctions d’action et de mutation

Nous avons maintenant une interface qui décrit la forme de notre état. Mais comment nous définir les types des paramètres des fonctions d’action et de mutation ?

Dans notre objet de mutations, nous avons une fonction updateListings() qui prend un payload de liste d’objets Listing. Nous spécifions le type du payload :

const mutations = {
  updateListings: (payload: Listing[]) => state.listings = payload,
  loadingPending: () => state.loading = true,
  loadingComplete: () => state.loading = false,
};

De même, pour nos fonctions d’action, nous devons spécifier les types des paramètres.

Conclusion

Dans cet article, nous avons vu comment définir la forme de notre store en TypeScript, comment utiliser les génériques et comment éviter les pièges courants. Nous avons créé une interface qui décrit la structure de nos données, nous avons utilisé les génériques avec Vue pour définir le type de notre objet d’état et spécifié les types des paramètres des fonctions d’action et de mutation.

Sujets supplémentaires

• Comment éviter les erreurs de typage ?
• Comment utiliser les interfaces pour décrire la forme de vos données ?
• Comment utiliser les génériques avec d’autres bibliothèques ou frameworks ?

Nous espérons que cet article vous aura été utile. N’hésitez pas à nous poser des questions ou à partager vos expériences !