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

La gestion des dates et de l'heure est l'une des tâches clés du développement web. Qu'il s'agisse d'afficher l'heure de publication, de calculer des délais ou de synchroniser des données avec un serveur, TypeScript fournit des outils puissants pour travailler avec les horodatages. Dans cet article, nous aborderons tous les aspects du travail avec les dates : de la création d'un objet Date aux manipulations complexes avec les fuseaux horaires et le formatage.

1. Bases du travail avec l'objet Date en TypeScript

En TypeScript, comme en JavaScript, l'objet intégré Date est responsable de la gestion des dates. Grâce au typage strict, TypeScript aide à éviter les erreurs lors de la transmission de données incorrectes.

Création d'un objet Date

Il existe plusieurs façons de créer une instance de date :

// Date et heure actuellesconst now: Date = new Date();console.log(now); // Tue Oct 24 2023 14:30:00 GMT+0300

// En millisecondes (Unix timestamp)const fromTimestamp: Date = new Date(1698153000000);

// À partir d'une chaîne (ISO 8601)const fromString: Date = new Date("2023-10-24T12:00:00Z");

// À partir de composants (année, mois, jour, heures, minutes, secondes)const customDate: Date = new Date(2023, 9, 24, 14, 30, 0); // Les mois vont de 0 à 11 !

Important : Les mois en JavaScript/TypeScript sont numérotés à partir de 0 (janvier — 0, décembre — 11). C'est une source fréquente de bugs.

Obtention des composants de la date

Pour extraire des parties individuelles de la date, on utilise des getters :

const date: Date = new Date();const year: number = date.getFullYear();      // 2023const month: number = date.getMonth();         // 9 (octobre)const day: number = date.getDate();            // 24const hours: number = date.getHours();         // 14const minutes: number = date.getMinutes();     // 30const seconds: number = date.getSeconds();     // 0const dayOfWeek: number = date.getDay();       // 2 (mardi, 0 - dimanche)

2. Formatage et affichage des dates

La sortie standard Date.toString() n'est souvent pas adaptée aux interfaces utilisateur. Examinons les principales méthodes de formatage.

Méthodes de formatage intégrées

• toDateString() — "Tue Oct 24 2023"
• toLocaleDateString() — date localisée (par exemple, "24.10.2023" pour la Russie)
• toISOString() — chaîne au format ISO ("2023-10-24T11:30:00.000Z")

const date: Date = new Date();console.log(date.toLocaleDateString('ru-RU')); // 24.10.2023console.log(date.toLocaleTimeString('ru-RU')); // 14:30:00

Formatage personnalisé avec Intl.DateTimeFormat

Pour un contrôle plus flexible, utilisez Intl.DateTimeFormat :

const date: Date = new Date();const formatter = new Intl.DateTimeFormat('ru-RU', {    year: 'numeric',    month: 'long',    day: 'numeric',    weekday: 'long',    hour: '2-digit',    minute: '2-digit'});console.log(formatter.format(date)); // "вторник, 24 октября 2023 г., 14:30"

Bibliothèque date-fns

Pour les tâches complexes, il est recommandé d'utiliser la bibliothèque date-fns. Elle est légère et bénéficie d'un excellent support TypeScript :

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

const date: Date = new Date();console.log(format(date, 'dd.MM.yyyy', { locale: ru })); // "24.10.2023"console.log(format(date, 'HH:mm:ss')); // "14:30:00"console.log(isWeekend(date)); // false

3. Manipulations des dates : addition, soustraction et comparaison

Modification de la date

La méthode la plus simple consiste à utiliser les setters :

const date: Date = new Date();date.setFullYear(2024);date.setMonth(11); // décembredate.setDate(31);console.log(date); // "Tue Dec 31 2024 14:30