Fortgeschrittene Arbeit mit Datum und Zeit in TypeScript: Methoden und Beispiele

Fortgeschrittene Arbeit mit Datum und Zeit in TypeScript: Von der Typisierung bis zu komplexen Operationen

Die Arbeit mit Datum und Zeit ist eine der häufigsten und zugleich tückischsten Aufgaben in der Webentwicklung. Auf fortgeschrittenem Niveau reicht die einfache Verwendung von new Date() nicht mehr aus. TypeScript bietet ein leistungsstarkes Typsystem, und moderne Bibliotheken (Luxon, Date-fns) ermöglichen das Schreiben von sicherem, vorhersagbarem und performantem Code. In diesem Artikel behandeln wir fortgeschrittene Techniken: strenge Typisierung, Arbeit mit Zeitzonen, komplexe Formatierung und Parsing sowie die Erstellung eigener Hilfsfunktionen.

1. Strenge Typisierung von Daten: Benutzerdefinierte Typen und Branded Types

Der Typ Date in TypeScript schützt nicht vor der Übergabe ungültiger Werte. Beispielsweise könnte eine Funktion, die ein Geburtsdatum erwartet, einen aktuellen Zeitstempel erhalten. Die Lösung ist die Verwendung von Branded Types (markierten Typen) oder Nominal Typing.

// Branded Type für Geburtsdatum\ntype BirthDate = Date & { __brand: 'BirthDate' };\n\nfunction createBirthDate(date: Date): BirthDate {\n  // Validierung: Das Datum darf nicht in der Zukunft liegen\n  if (date.getTime() > Date.now()) {\n    throw new Error('Das Geburtsdatum kann nicht in der Zukunft liegen');\n  }\n  return date as BirthDate;\n}\n\nfunction calculateAge(birthDate: BirthDate): number {\n  const diff = Date.now() - birthDate.getTime();\n  return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));\n}\n\n// Verwendung\nconst rawDate = new Date('1990-05-15');\nconst birth = createBirthDate(rawDate);\nconsole.log(calculateAge(birth)); // OK\n\n// Fehler: Argument of type 'Date' is not assignable to parameter of type 'BirthDate'\n// console.log(calculateAge(new Date())); \n

Dieser Ansatz stellt sicher, dass in die Funktion calculateAge nur ein validiertes Geburtsdatum gelangt. Für komplexere Szenarien können Typen für Zeitstempel (UnixTimestamp), Intervalle (TimeInterval) usw. erstellt werden.

2. Fortgeschrittene Formatierung und Parsing mit Intl.DateTimeFormat

Das integrierte Objekt Intl.DateTimeFormat ermöglicht eine flexible Formatierung von Daten ohne externe Bibliotheken. Auf fortgeschrittenem Niveau können wir wiederverwendbare Formatierer erstellen und komplexe Locales verarbeiten.

// Erstellen eines Formatierers mit Optionen\nconst formatter = new Intl.DateTimeFormat('de-DE', {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n  weekday: 'long',\n  hour: '2-digit',\n  minute: '2-digit',\n  timeZone: 'Europe/Berlin',\n});\n\n// Formatierung\nconsole.log(formatter.format(new Date())); \n// "Freitag, 25. Oktober 2024, 14:30"\n\n// Parsing (benutzerdefinierte Hilfsfunktion)\nfunction parseLocalizedDate(dateStr: string, locale: string): Date | null {\n  const parts = dateStr.match(/(\\d{4})-(\\d{2})-(\\d{2})/);\n  if (!parts) return null;\n  \n  const [, year, month, day] = parts;\n  return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));\n}\n

Tipp: Erstellen Sie Formatierer aus Performance-Gründen einmal und verwenden Sie sie wieder. Vermeiden Sie es, bei jedem Aufruf eine neue Instanz zu erstellen.

3. Arbeit mit Zeitzonen und der Bibliothek Luxon

Das integrierte Date-Objekt kommt mit Zeitzonen nur schlecht zurecht. Luxon ist eine moderne Bibliothek vom Ersteller von Moment.js, die sich ideal in TypeScript integrieren lässt.

import { DateTime, Settings } from 'luxon';\n\n// Festlegen der Standardzeitzone\nSettings.defaultZone = 'Europe/Berlin';\n\n// Erstellen eines Datums mit expliziter Zeitzonenangabe\nconst meeting = DateTime.fromISO('2024-11-01T15:00:00', { zone: 'America/New_York' });\nconsole.log(meeting.toISO()); // 2024-11-01T15:00:00.000-04:00\n\n// Konvertierung in eine andere Zeitzone\nconst berlinTime = meeting.setZone('Europe/Berlin');\nconsole.log(berlinTime.toFormat('dd.MM.yyyy HH:mm')); // 01.11.2024 20:00\n\n// Arbeit mit Intervallen\nconst start = DateTi