Arbeit mit Datum und Zeit in TypeScript: von A bis Z

Einleitung: Warum die Arbeit mit Daten in TypeScript besondere Aufmerksamkeit erfordert

Die Arbeit mit Datum und Zeit gehört zu den häufigsten und zugleich tückischsten Aufgaben in der Webentwicklung. In TypeScript, einer streng typisierten Erweiterung von JavaScript, hat das Objekt Date alle "Vorzüge" seines Vorfahren geerbt: unintuitive Monate (Zählung ab null), Mutabilität von Methoden und Probleme mit Zeitzonen. Durch die Verwendung strenger Typisierung und moderner Bibliotheken können Sie jedoch sicheren, vorhersagbaren und lesbaren Code für die Arbeit mit Zeit schreiben.

In diesem Artikel behandeln wir alles, was ein Entwickler wissen muss: von der grundlegenden Erstellung von Daten bis zur fortgeschrittenen Arbeit mit Zeitzonen und Formatierung. Sie erfahren, wie Sie typische Fehler vermeiden und welche Werkzeuge (integriert und von Drittanbietern) am besten für TypeScript-Projekte geeignet sind.

1. Grundlagen: Das Date-Objekt und seine Typisierung in TypeScript

Erstellung und grundlegende Methoden

In TypeScript wird, wie in JavaScript, das integrierte Objekt Date für die Arbeit mit Daten verwendet. TypeScript bietet dafür vorgefertigte Typen, sodass keine zusätzlichen Definitionen erforderlich sind.

// Erstellung des aktuellen Datumsconst now: Date = new Date();console.log(now); // 2024-01-15T10:30:00.000Z

// Erstellung aus einem String (ISO 8601)const specificDate: Date = new Date('2024-12-31T23:59:59');

// Erstellung aus Komponenten (Jahr, Monat [0-11], Tag, Stunden...)const birthday: Date = new Date(1990, 0, 15); // 15. Januar 1990// Achtung: Monat 0 = Januar!

Problem mit der Mutabilität

Methoden des Date-Objekts verändern das ursprüngliche Objekt. Dies kann zu unerwarteten Fehlern führen. TypeScript kann dies auf Typebene nicht verhindern, aber Sie können immutable Ansätze verwenden.

const date = new Date('2024-01-01');date.setDate(date.getDate() + 5); // Mutation! date ist jetzt der 6. Januar// Besser: Ein neues Objekt erstellen:const newDate = new Date(date.getTime() + 5 * 24 * 60 * 60 * 1000);

Typisierung des Unix-Timestamps

Häufig werden Daten als Zahlen (Millisekunden seit 1970) übergeben. Verwenden Sie zur Klarheit einen Type Alias:

type UnixTimestamp = number;

function formatTimestamp(ts: UnixTimestamp): string {  return new Date(ts).toISOString();}

const myTimestamp: UnixTimestamp = 1705315200000;console.log(formatTimestamp(myTimestamp));

2. Formatierung und Parsing von Daten

Integrierte Formatierungsmethoden

JavaScript bietet grundlegende Methoden für die lokalisierte Ausgabe. In TypeScript funktionieren sie "out of the box":

const date = new Date('2024-06-15T14:30:00');

// Lokalisierte Stringsconsole.log(date.toLocaleDateString('ru-RU')); // "15.06.2024"console.log(date.toLocaleTimeString('en-US')); // "2:30:00 PM"console.log(date.toLocaleString('de-DE'));     // "15.6.2024, 14:30:00"

// ISO-String (praktisch für APIs)console.log(date.toISOString()); // "2024-06-15T11:30:00.000Z" (immer UTC)

Parsing von Strings: Gefahren

Das Parsen von Strings über den Konstruktor new Date(str) kann in verschiedenen Browsern zu unerwarteten Ergebnissen führen. Verwenden Sie besser Date.parse() mit expliziter Prüfung oder Bibliotheken von Drittanbietern.

// Unzuverlässige Methodeconst parsed = new Date('2024/01/15'); // kann instabil funktionieren

// Zuverlässige Methode: ISO 8601const safeParse = (dateStr: string): Date | null => {  const ts = Date.parse(dateStr);  return isNaN(ts) ? null : new Date(ts);};

const result = safeParse('2024-01-15T10:00:00Z');if (result) {  console.log(result.toISOString());}

3. Fortgeschrittene Manipulation und Vergleich

Vergleich von Daten

Daten können direkt mit Vergleichsoperatoren verglichen werden, aber für einen genauen Vergleich (Gleichheit) muss man sie in Zahlen umwandeln:

const date1 = new Date('2024-01-01');const date2 = new Date('2024-01-0