Fortgeschrittene Arbeit mit Datum und Zeit in TypeScript

Fortgeschrittene Arbeit mit Datum und Zeit in TypeScript

Die Arbeit mit Datum und Zeit gehört zu den häufigsten und gleichzeitig komplexesten Aufgaben in der Webentwicklung. In TypeScript können wir dank der strengen Typisierung viele Fehler vermeiden, die mit Datumsmanipulationen verbunden sind, aber das Standardobjekt Date hat eine Reihe von Einschränkungen. In diesem Artikel betrachten wir fortgeschrittene Ansätze für die Arbeit mit Datum und Zeit, einschließlich der Verwendung moderner Bibliotheken, Typisierung, Umgang mit Zeitzonen und Parsing komplexer Formate.

1. Probleme des nativen Date und deren Lösung mit TypeScript

Das Standard-Date in JavaScript ist für komplexe Operationen äußerst unpraktisch:

• Mutabilität: Methoden wie setDate() verändern das ursprüngliche Objekt.
• Fehlende Formatierung: Es gibt keine eingebaute Möglichkeit, ein Datum im Format "DD.MM.YYYY" auszugeben.
• Schwache Zeitzonenunterstützung: Date speichert die Zeit in UTC, während Methoden wie getHours() die lokale Zeit zurückgeben.
• Probleme beim Parsing: new Date("2023-01-01") kann in verschiedenen Browsern unterschiedlich interpretiert werden.

TypeScript hilft, indem es uns erlaubt, Wrapper und Hilfsfunktionen zu erstellen. Zum Beispiel können wir strenge Typen für die Formatierung definieren:

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 '';  }}

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

Dieser Ansatz stellt sicher, dass wir kein ungültiges Format an die Funktion übergeben, da TypeScript den Typ bereits zur Kompilierzeit prüft.

2. Verwendung der Bibliothek date-fns: Sauberkeit und Funktionalität

date-fns ist eine moderne Bibliothek für die Arbeit mit Datumsangaben, die sich ideal für TypeScript eignet. Ihre Hauptvorteile:

• Unveränderlichkeit (Immutability): Alle Funktionen geben neue Objekte zurück, ohne die ursprünglichen zu verändern.
• Modularität: Sie importieren nur die benötigten Funktionen, was die Bundle-Größe reduziert.
• Typisierung: Die Bibliothek bietet eine integrierte TypeScript-Unterstützung.

Installation:

npm install date-fns

Beispiele für die fortgeschrittene Verwendung:

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

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

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

// Differenz zwischen Datenconst startDate = new Date(2023, 0, 1);const endDate = new Date(2023, 11, 31);const diff = differenceInDays(endDate, startDate);console.log(diff); // 364

// Prüfung auf Wochenendeconsole.log(isWeekend(date)); // true (Sonntag)

// Parsen eines ISO-Stringsconst parsed = parseISO("2023-10-15T10:30:00Z");console.log(format(parsed, 'HH:mm')); // "13:30" (unter Berücksichtigung der Zeitzone)

Wichtig: date-fns arbeitet mit Date-Objekten, daher