Travailler avec les dates et l'heure en TypeScript : guide complet

Travailler avec les dates et l'heure en TypeScript : des bases aux techniques avancées

Travailler avec les dates et l'heure est l'une des tâches les plus courantes en développement web. TypeScript, en tant que surcouche de JavaScript, hérite de l'objet natif Date, mais y ajoute un typage strict. Dans cet article, nous allons voir comment travailler efficacement avec les dates en TypeScript : de la création et du formatage aux manipulations complexes avec les fuseaux horaires. Vous apprendrez à éviter les erreurs typiques et à rendre votre code plus fiable et plus lisible.

Les bases : création et opérations élémentaires avec les dates

L'objet Date en TypeScript est le même objet JavaScript, mais avec une meilleure prise en charge des types. Examinons les principales façons de créer des dates :

// Date et heure actuellesconst now: Date = new Date();

// À partir d'une chaîne (ISO 8601)const specificDate: Date = new Date('2024-12-25T10:30:00Z');

// À partir de composants (année, mois (0-11), jour, heures, minutes, secondes)const customDate: Date = new Date(2024, 11, 25, 10, 30, 0); // 25 décembre 2024

// À partir de millisecondes (timestamp Unix)const fromTimestamp: Date = new Date(1703493000000);

Il est important de se rappeler que les mois en JavaScript/TypeScript sont indexés à partir de 0 (janvier = 0, décembre = 11). C'est une source fréquente d'erreurs pour les débutants. Pour éviter toute confusion, il est recommandé d'utiliser des formats de chaîne ou des bibliothèques.

Méthodes de base pour obtenir les composants d'une date :

• getFullYear() — retourne l'année (4 chiffres)
• getMonth() — le mois (0-11)
• getDate() — le jour du mois (1-31)
• getDay() — le jour de la semaine (0 — dimanche, 6 — samedi)
• getHours(), getMinutes(), getSeconds() — l'heure
• getTime() — le nombre de millisecondes depuis le 1er janvier 1970

Exemple d'utilisation avec typage :

function formatDate(date: Date): string {    const year: number = date.getFullYear();    const month: string = String(date.getMonth() + 1).padStart(2, '0');    const day: string = String(date.getDate()).padStart(2, '0');    return `${year}-${month}-${day}`;}

const today: Date = new Date();console.log(formatDate(today)); // "2024-12-25"

Formatage et affichage des dates

Les méthodes de formatage de dates intégrées en TypeScript sont limitées. Pour des tâches simples, vous pouvez utiliser toLocaleDateString() et toLocaleTimeString() :

const date: Date = new Date('2024-12-25T10:30:00');

// Format localiséconsole.log(date.toLocaleDateString('ru-RU')); // "25.12.2024"console.log(date.toLocaleTimeString('ru-RU')); // "10:30:00"

// Format completconsole.log(date.toLocaleString('ru-RU', {    year: 'numeric',    month: 'long',    day: 'numeric',    weekday: 'long'})); // "среда, 25 декабря 2024 г."

Cependant, pour un formatage complexe ou un contrôle strict sur la sortie, il est préférable d'utiliser des bibliothèques spécialisées. La plus populaire est date-fns — légère, modulaire et entièrement compatible avec TypeScript.

Installation :

npm install date-fns

Exemple d'utilisation :

import { format, addDays, parseISO } from 'date-fns';import { ru } from 'date-fns/locale';

const date: Date = parseISO('2024-12-25T10:30:00');

// Formatageconsole.log(format(date, 'dd.MM.yyyy')); // "25.12.2024"console.log(format(date, 'PPP', { locale: ru })); // "25 декабря 2024 г."

// Ajout de joursconst futureDate: Date = addDays(date, 10);console.log(format(futureDate, 'dd.MM.yyyy')); // "04.01.2025"

Autres fonctions utiles de date-fns : differenceInDays, isBefore, isAfter, startOfMonth, endOfWeek et bien d'autres. La bibliothèque permet d'écrire un code fonctionnel et propre sans mutation de la source