Définir le modèle d’une dépense

Une dépense mal décrite peut contenir un montant sous forme de texte, une date absente ou une catégorie inconnue. Ces incohérences compliquent ensuite l’affichage et le calcul du récapitulatif. Vous allez définir un modèle TypeScript qui précise les données acceptées par le tableau de bord.

Dans cette leçon, vous préparez uniquement le contrat des données. Vous ne construisez pas encore les composants ni le chargement des dépenses ; ces étapes viendront ensuite. Le modèle sera placé dans le fichier src/types.ts, prévu par le projet.

Décrire les champs d’une dépense

Une interface TypeScript décrit la forme d’un objet : les propriétés qu’il doit contenir et le type de chacune. Pour une dépense, le tableau de bord a besoin d’un identifiant, d’un libellé, d’un montant, d’une catégorie et d’une date. Ici, le montant est un nombre en euros et la date est une chaîne au format AAAA-MM-JJ, compatible avec la valeur d’un champ HTML de type date.

export type CategorieDepense = "Alimentation" | "Transport" | "Logement" | "Loisirs" | "Santé" | "Autre";

export interface Depense {
  id: string;
  libelle: string;
  montant: number;
  categorie: CategorieDepense;
  date: string;
  note?: string;
}

Chaque propriété sans point d’interrogation est obligatoire : un objet de type Depense doit fournir les cinq valeurs indiquées. Le signe ? rend note optionnelle ; vous pouvez l’omettre, ou fournir une chaîne si une précision est utile. Cette option ne signifie pas que la propriété doit contenir une chaîne vide lorsqu’aucune note n’existe.

Limiter les catégories autorisées

CategorieDepense est une union littérale : elle autorise exactement les chaînes énumérées dans sa définition. Une valeur comme "Transport" est acceptée, tandis que "Vacances" ne l’est pas. Ce choix empêche les fautes de saisie et garantit que les catégories utilisées par les dépenses correspondent à une liste connue.

import type { Depense } from "./types";

const depenseExemple: Depense = {
  id: "depense-001",
  libelle: "Courses hebdomadaires",
  montant: 42.8,
  categorie: "Alimentation",
  date: "2025-01-12",
  note: "Marché et épicerie"
};

const depenseSansNote: Depense = {
  id: "depense-002",
  libelle: "Trajet en bus",
  montant: 2.1,
  categorie: "Transport",
  date: "2025-01-13"
};

Ces deux objets respectent le modèle : le premier contient une note, le second l’omet. Si vous affectez une valeur non numérique à montant, oubliez date ou utilisez une catégorie qui ne figure pas dans l’union, TypeScript signale une erreur lors de la vérification du projet. Il s’agit d’une vérification à la compilation ; elle ne transforme pas automatiquement une donnée reçue d’un service externe.

À retenir

• Déclarez le modèle partagé de dépense dans src/types.ts.
• Les champs obligatoires décrivent les données nécessaires à chaque dépense ; le suffixe ? signale une propriété optionnelle.
• Une union littérale limite les catégories aux valeurs explicitement autorisées.
• TypeScript vérifie la cohérence des objets annotés, mais ne valide pas à lui seul les données reçues à l’exécution.
• Respectez le format de date AAAA-MM-JJ et conservez le montant sous forme numérique.

Dans la prochaine leçon, vous répartirez le tableau de bord entre ses composants en vous appuyant sur ce modèle de dépense.