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

Arbeiten mit Daten und Zeiten in TypeScript: Von den Grundlagen bis zu fortgeschrittenen Techniken

Die Verwaltung von Daten und Zeiten ist eine der zentralen Aufgaben in der Webentwicklung. Ob es um die Anzeige des Veröffentlichungszeitpunkts, die Berechnung von Fristen oder die Synchronisierung von Daten mit dem Server geht – TypeScript bietet leistungsstarke Werkzeuge für die Arbeit mit Zeitstempeln. In diesem Artikel behandeln wir alle Aspekte der Arbeit mit Daten: von der Erstellung eines Date-Objekts bis hin zu komplexen Manipulationen mit Zeitzonen und Formatierung.

1. Grundlagen der Arbeit mit dem Date-Objekt in TypeScript

In TypeScript, wie auch in JavaScript, ist das integrierte Date-Objekt für die Arbeit mit Daten zuständig. Dank der strengen Typisierung hilft TypeScript, Fehler bei der Übergabe ungültiger Daten zu vermeiden.

Erstellen eines Date-Objekts

Es gibt mehrere Möglichkeiten, eine Datumsinstanz zu erstellen:

// Aktuelles Datum und Uhrzeitconst now: Date = new Date();console.log(now); // Tue Oct 24 2023 14:30:00 GMT+0300

// Nach Millisekunden (Unix-Timestamp)const fromTimestamp: Date = new Date(1698153000000);

// Aus einem String (ISO 8601)const fromString: Date = new Date("2023-10-24T12:00:00Z");

// Aus Komponenten (Jahr, Monat, Tag, Stunden, Minuten, Sekunden)const customDate: Date = new Date(2023, 9, 24, 14, 30, 0); // Monate von 0 bis 11!

Wichtig: Monate werden in JavaScript/TypeScript ab 0 nummeriert (Januar = 0, Dezember = 11). Dies ist eine häufige Fehlerquelle.

Abrufen von Datumskomponenten

Zum Extrahieren einzelner Teile eines Datums werden Getter verwendet:

const date: Date = new Date();const year: number = date.getFullYear();      // 2023const month: number = date.getMonth();         // 9 (Oktober)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 (Dienstag, 0 = Sonntag)

2. Formatierung und Ausgabe von Daten

Die Standardausgabe von Date.toString() ist für Benutzeroberflächen oft ungeeignet. Betrachten wir die wichtigsten Formatierungsmethoden.

Integrierte Formatierungsmethoden

• toDateString() — "Tue Oct 24 2023"
• toLocaleDateString() — lokalisiertes Datum (z. B. "24.10.2023" für Deutschland)
• toISOString() — Zeichenkette im ISO-Format ("2023-10-24T11:30:00.000Z")

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

Benutzerdefinierte Formatierung mit Intl.DateTimeFormat

Für mehr Flexibilität verwenden Sie Intl.DateTimeFormat:

const date: Date = new Date();const formatter = new Intl.DateTimeFormat('de-DE', {    year: 'numeric',    month: 'long',    day: 'numeric',    weekday: 'long',    hour: '2-digit',    minute: '2-digit'});console.log(formatter.format(date)); // "Dienstag, 24. Oktober 2023, 14:30"

Die Bibliothek date-fns

Für komplexe Aufgaben wird die Verwendung der Bibliothek date-fns empfohlen. Sie ist leichtgewichtig und bietet eine hervorragende TypeScript-Unterstützung:

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

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

3. Manipulation von Daten: Addition, Subtraktion und Vergleich

Ändern eines Datums

Der einfachste Weg ist die Verwendung von Settern:

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