Arbeiten mit Datum und Uhrzeit in TypeScript: vollständiger Leitfaden

Arbeiten mit Datum und Zeit in TypeScript: Von den Grundlagen bis zu fortgeschrittenen Techniken

Das Arbeiten mit Datum und Zeit ist eine der häufigsten Aufgaben in der Webentwicklung. TypeScript, als Erweiterung von JavaScript, erbt das eingebaute Date-Objekt, fügt ihm aber eine strenge Typisierung hinzu. In diesem Artikel werden wir uns ansehen, wie man effektiv mit Daten in TypeScript arbeitet: von der Erstellung und Formatierung bis hin zu komplexen Manipulationen mit Zeitzonen. Sie erfahren, wie Sie typische Fehler vermeiden und Ihren Code zuverlässiger und lesbarer machen.

Grundlagen: Erstellung und grundlegende Operationen mit Daten

Das Date-Objekt in TypeScript ist dasselbe JavaScript-Objekt, jedoch mit verbesserter Typunterstützung. Betrachten wir die grundlegenden Möglichkeiten, Daten zu erstellen:

// Aktuelles Datum und Uhrzeitconst now: Date = new Date();

// Aus einem String (ISO 8601)const specificDate: Date = new Date('2024-12-25T10:30:00Z');

// Aus Komponenten (Jahr, Monat (0-11), Tag, Stunden, Minuten, Sekunden)const customDate: Date = new Date(2024, 11, 25, 10, 30, 0); // 25. Dezember 2024

// Aus Millisekunden (Unix-Timestamp)const fromTimestamp: Date = new Date(1703493000000);

Es ist wichtig zu bedenken, dass Monate in JavaScript/TypeScript ab 0 nummeriert werden (Januar = 0, Dezember = 11). Dies ist eine häufige Fehlerquelle für Anfänger. Um Verwirrung zu vermeiden, wird empfohlen, String-Formate oder Bibliotheken zu verwenden.

Grundlegende Methoden zum Abrufen von Datumskomponenten:

• getFullYear() — gibt das Jahr zurück (4 Ziffern)
• getMonth() — Monat (0-11)
• getDate() — Tag des Monats (1-31)
• getDay() — Wochentag (0 = Sonntag, 6 = Samstag)
• getHours(), getMinutes(), getSeconds() — Uhrzeit
• getTime() — Anzahl der Millisekunden seit dem 1. Januar 1970

Beispiel zur Verwendung mit Typisierung:

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"

Formatierung und Anzeige von Daten

Die eingebauten Methoden zur Datumsformatierung in TypeScript sind begrenzt. Für einfache Aufgaben können Sie toLocaleDateString() und toLocaleTimeString() verwenden:

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

// Lokalisiertes Formatconsole.log(date.toLocaleDateString('de-DE')); // "25.12.2024"console.log(date.toLocaleTimeString('de-DE')); // "10:30:00"

// Vollformatconsole.log(date.toLocaleString('de-DE', {    year: 'numeric',    month: 'long',    day: 'numeric',    weekday: 'long'})); // "Mittwoch, 25. Dezember 2024"

Für komplexe Formatierungen oder eine strenge Kontrolle über die Ausgabe ist es jedoch besser, spezialisierte Bibliotheken zu verwenden. Die beliebteste ist date-fns — leichtgewichtig, modular und vollständig kompatibel mit TypeScript.

Installation:

npm install date-fns

Beispiel zur Verwendung:

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

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

// Formatierungconsole.log(format(date, 'dd.MM.yyyy')); // "25.12.2024"console.log(format(date, 'PPP', { locale: de })); // "25. Dezember 2024"

// Tage hinzufügenconst futureDate: Date = addDays(date, 10);console.log(format(futureDate, 'dd.MM.yyyy')); // "04.01.2025"

Weitere nützliche Funktionen von date-fns: differenceInDays, isBefore, isAfter, startOfMonth, endOfWeek und viele andere. Die Bibliothek ermöglicht es, sauberen, funktionalen Code ohne Mutation der Quelle zu schreiben.