Travail avancé avec les dates et l'heure en TypeScript

Travail avancé avec les dates et l'heure en TypeScript

Travailler avec les dates et l'heure est l'une des tâches les plus fréquentes et en même temps les plus complexes en développement web. En TypeScript, grâce au typage strict, nous pouvons éviter de nombreuses erreurs liées aux manipulations de dates, mais l'objet standard Date présente un certain nombre de limitations. Dans cet article, nous examinerons des approches avancées pour travailler avec les dates et l'heure, y compris l'utilisation de bibliothèques modernes, le typage, la gestion des fuseaux horaires et l'analyse syntaxique de formats complexes.

1. Problèmes du Date natif et leur solution avec TypeScript

Le Date standard en JavaScript est extrêmement peu pratique pour les opérations complexes :

• Mutabilité : des méthodes comme setDate() modifient l'objet d'origine.
• Absence de formatage : il n'existe pas de méthode intégrée pour afficher une date au format "JJ.MM.AAAA".
• Gestion faible des fuseaux horaires : Date stocke l'heure en UTC, tandis que les méthodes getHours() renvoient l'heure locale.
• Problèmes d'analyse syntaxique : new Date("2023-01-01") peut être interprété différemment selon les navigateurs.

TypeScript aide en nous permettant de créer des wrappers et des utilitaires. Par exemple, nous pouvons définir des types stricts pour le formatage :

type DateFormat = 'DD.MM.YYYY' | 'YYYY-MM-DD' | 'HH:mm:ss';

function formatDate(date: Date, format: DateFormat): string {  const day = String(date.getDate()).padStart(2, '0');  const month = String(date.getMonth() + 1).padStart(2, '0');  const year = date.getFullYear();  const hours = String(date.getHours()).padStart(2, '0');  const minutes = String(date.getMinutes()).padStart(2, '0');  const seconds = String(date.getSeconds()).padStart(2, '0');

  switch (format) {    case 'DD.MM.YYYY':      return `${day}.${month}.${year}`;    case 'YYYY-MM-DD':      return `${year}-${month}-${day}`;    case 'HH:mm:ss':      return `${hours}:${minutes}:${seconds}`;    default:      return '';  }}

// Utilisationconst now = new Date();console.log(formatDate(now, 'DD.MM.YYYY')); // "15.10.2023"

Cette approche garantit que nous ne transmettrons pas un format incorrect à la fonction, car TypeScript vérifiera le type au moment de la compilation.

2. Utilisation de la bibliothèque date-fns : propreté et fonctionnalité

date-fns est une bibliothèque moderne pour travailler avec les dates, qui convient parfaitement à TypeScript. Ses principaux avantages :

• Immutabilité : toutes les fonctions renvoient de nouveaux objets sans modifier les originaux.
• Modularité : vous importez uniquement les fonctions nécessaires, ce qui réduit la taille du bundle.
• Typage : la bibliothèque prend en charge TypeScript de manière native.

Installation :

npm install date-fns

Exemples d'utilisation avancée :

import { format, addDays, differenceInDays, isWeekend, parseISO } from 'date-fns';

// Formatageconst date = new Date(2023, 9, 15); // 15 octobre 2023console.log(format(date, 'dd.MM.yyyy')); // "15.10.2023"console.log(format(date, 'EEEE, MMMM do yyyy')); // "Sunday, October 15th 2023"

// Arithmétiqueconst nextWeek = addDays(date, 7);console.log(format(nextWeek, 'dd.MM.yyyy')); // "22.10.2023"

// Différence entre datesconst startDate = new Date(2023, 0, 1);const endDate = new Date(2023, 11, 31);const diff = differenceInDays(endDate, startDate);console.log(diff); // 364

// Vérification du week-endconsole.log(isWeekend(date)); // true (dimanche)

// Analyse syntaxique d'une chaîne ISOconst parsed = parseISO("2023-10-15T10:30:00Z");console.log(format(parsed, 'HH:mm')); // "13:30" (en tenant compte du fuseau horaire)

Important : date-fns fonctionne avec des objets Date, donc