Définir une dépense en TypeScript

Dans un tableau de bord, une dépense doit toujours être décrite de façon cohérente. Si un montant est enregistré comme du texte ou si une date manque, les calculs et les affichages risquent de devenir difficiles à fiabiliser. Vous allez définir une structure commune que TypeScript pourra vérifier.

Décrire la structure d’une dépense

Un type d’objet décrit les propriétés attendues d’une valeur. Pour le tableau de bord, une dépense possède une description, un montant, une catégorie et une date. Vous pouvez exprimer cette structure avec le mot-clé type, puis indiquer le nom et le type de chaque propriété entre accolades.

type Depense = {
  description: string;
  montant: number;
  categorie: string;
  date: string;
};

Les noms des propriétés sont suivis de deux-points, puis de leur type. Les points-virgules séparent les propriétés et rendent la structure facile à lire. Ici, string convient à la description, à la catégorie et à la date, tandis que number convient au montant. Le type Depense devient une référence réutilisable pour décrire les données du projet.

Créer une dépense conforme

Après avoir défini le type, vous pouvez l’utiliser pour annoter une variable. L’objet doit contenir chacune des propriétés prévues, avec une valeur du bon type. Dans cet exemple, le montant est un nombre en euros et la date est une chaîne au format AAAA-MM-JJ, pratique pour représenter une date dans les données du tableau de bord.

type Depense = {
  description: string;
  montant: number;
  categorie: string;
  date: string;
};

const depenseExemple: Depense = {
  description: "Courses",
  montant: 42.5,
  categorie: "Alimentation",
  date: "2025-03-08",
};

L’annotation : Depense demande à TypeScript de vérifier l’objet dès l’écriture du code. La valeur 42.5 est acceptée pour montant, car elle est de type number. La catégorie reste une chaîne : cette leçon décrit la forme générale d’une dépense, sans encore définir les catégories disponibles dans l’interface.

Pourquoi choisir ces types ?

Un montant doit pouvoir participer à des opérations numériques : le type number évite de confondre une somme et son affichage sous forme de texte. Une date au format texte correspond au type string et peut être fournie par un champ de date. TypeScript ne vérifie toutefois pas que cette chaîne représente réellement une date valide ; le format indiqué est une convention à respecter dans vos données.

À ce stade, vous définissez uniquement le modèle des données : vous ne construisez pas encore l’interface et ne gérez pas les dépenses dans un état React. Dans les prochaines leçons, ce type servira de fondation pour créer un composant, puis transmettre des données entre les parties du tableau de bord.

À retenir

• Un type d’objet décrit les propriétés attendues d’une donnée.
• Chaque propriété de Depense a un nom et un type, ici string ou number.
• Les quatre propriétés définies sont obligatoires pour chaque dépense.
• Une date est stockée comme une chaîne au format AAAA-MM-JJ ; le type ne valide pas son contenu.