Travailler avec les dates et l'heure en TypeScript : de A à Z

Introduction : Pourquoi travailler avec les dates en TypeScript nécessite une attention particulière

Travailler avec les dates et l'heure est l'une des tâches les plus courantes et pourtant les plus délicates en développement web. En TypeScript, qui est une surcouche strictement typée de JavaScript, l'objet Date a hérité de tous les "charmes" de son prédécesseur : des mois non intuitifs (comptage à partir de zéro), la mutabilité des méthodes et des problèmes de fuseaux horaires. Cependant, en utilisant un typage strict et des bibliothèques modernes, vous pouvez écrire un code sûr, prévisible et lisible pour travailler avec le temps.

Dans cet article, nous allons aborder tout ce qu'un développeur doit savoir : de la création de base des dates à la gestion avancée des fuseaux horaires et du formatage. Vous apprendrez à éviter les erreurs typiques et quels outils (intégrés ou tiers) conviennent le mieux aux projets TypeScript.

1. Les bases : L'objet Date et son typage en TypeScript

Création et méthodes de base

En TypeScript, comme en JavaScript, l'objet intégré Date est utilisé pour travailler avec les dates. TypeScript fournit des types prêts à l'emploi, donc aucune définition supplémentaire n'est nécessaire.

// Création de la date actuelle\nconst now: Date = new Date();\nconsole.log(now); // 2024-01-15T10:30:00.000Z\n\n// Création à partir d'une chaîne (ISO 8601)\nconst specificDate: Date = new Date('2024-12-31T23:59:59');\n\n// Création à partir de composants (année, mois [0-11], jour, heures...)\nconst birthday: Date = new Date(1990, 0, 15); // 15 janvier 1990\n// Attention : le mois 0 = Janvier !

Le problème de la mutabilité

Les méthodes de l'objet Date modifient l'objet d'origine. Cela peut entraîner des bugs inattendus. TypeScript ne peut pas l'empêcher au niveau des types, mais vous pouvez utiliser des approches immuables.

const date = new Date('2024-01-01');\ndate.setDate(date.getDate() + 5); // mutation ! date est maintenant le 6 janvier\n// Mieux vaut créer un nouvel objet :\nconst newDate = new Date(date.getTime() + 5 * 24 * 60 * 60 * 1000);

Typage du timestamp Unix

Les dates sont souvent transmises sous forme de nombres (millisecondes depuis 1970). Utilisez un alias de type pour plus de clarté :

type UnixTimestamp = number;\n\nfunction formatTimestamp(ts: UnixTimestamp): string {\n  return new Date(ts).toISOString();\n}\n\nconst myTimestamp: UnixTimestamp = 1705315200000;\nconsole.log(formatTimestamp(myTimestamp));

2. Formatage et parsing des dates

Méthodes de formatage intégrées

JavaScript fournit des méthodes de base pour l'affichage localisé. En TypeScript, elles fonctionnent "prêtes à l'emploi" :

const date = new Date('2024-06-15T14:30:00');\n\n// Chaînes localisées\nconsole.log(date.toLocaleDateString('ru-RU')); // "15.06.2024"\nconsole.log(date.toLocaleTimeString('en-US')); // "2:30:00 PM"\nconsole.log(date.toLocaleString('de-DE'));     // "15.6.2024, 14:30:00"\n\n// Chaîne ISO (pratique pour les API)\nconsole.log(date.toISOString()); // "2024-06-15T11:30:00.000Z" (toujours UTC)

Parsing de chaînes : dangers

Le parsing de chaînes via le constructeur new Date(str) peut donner des résultats inattendus dans différents navigateurs. Il est préférable d'utiliser Date.parse() avec une vérification explicite ou des bibliothèques tierces.

// Méthode peu fiable\nconst parsed = new Date('2024/01/15'); // peut fonctionner de manière instable\n\n// Méthode fiable : ISO 8601\nconst safeParse = (dateStr: string): Date | null => {\n  const ts = Date.parse(dateStr);\n  return isNaN(ts) ? null : new Date(ts);\n};\n\nconst result = safeParse('2024-01-15T10:00:00Z');\nif (result) {\n  console.log(result.toISOString());\n}

3. Manipulations avancées et comparaison

Comparaison de dates

Les dates peuvent être comparées directement via les opérateurs de comparaison, mais pour une comparaison précise (égalité), il faut les convertir en nombre :

const date1 = new Date('2024-01-01');\nconst date2 = new Date('2024-01-0