Arbeiten mit Daten in TypeScript: Überblick über die Bibliotheken date-fns, Luxon und Day.js

Arbeiten mit Daten in TypeScript: Überblick über die besten Bibliotheken

TypeScript, als streng typisierte Erweiterung von JavaScript, erbt alle Probleme der Arbeit mit Daten, die dem nativen Date innewohnen – eine unintuitive API, Mutabilität, Probleme mit Zeitzonen und Parsing. Glücklicherweise bietet das TypeScript-Ökosystem mehrere leistungsstarke Bibliotheken, die diese Probleme lösen. In diesem Artikel betrachten wir die drei beliebtesten Werkzeuge: date-fns, Luxon und Day.js, vergleichen ihre Fähigkeiten und geben praktische Codebeispiele.

1. date-fns – modular und funktional

date-fns ist eine Bibliothek, die auf den Prinzipien der funktionalen Programmierung aufbaut. Sie besteht aus vielen unabhängigen Funktionen, was es ermöglicht, nur das zu importieren, was benötigt wird, und das Bundle nicht aufzublähen. Sie arbeitet mit nativen Date-Objekten, was die Integration vereinfacht.

Hauptmerkmale:

• Reine Funktionen: Jede Funktion gibt ein neues Objekt zurück, ohne das ursprüngliche zu verändern.
• Modularität: Importieren Sie nur die benötigten Funktionen (z. B. import { format, addDays } from 'date-fns').
• Lokalisierungsunterstützung: Integrierte Unterstützung für über 50 Sprachen, einschließlich Deutsch.
• TypeScript: Hervorragende Typisierung aus dem Stand.

Codebeispiele mit date-fns

Installation:

npm install date-fns

Datumsformatierung:

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

const date = new Date(2024, 11, 25); // 25. Dezember 2024const formatted = format(date, 'dd MMMM yyyy', { locale: de });console.log(formatted); // "25 Dezember 2024"

Datumsmanipulation:

import { addDays, subMonths, differenceInDays } from 'date-fns';

const today = new Date();const future = addDays(today, 10);const past = subMonths(today, 3);const diff = differenceInDays(future, past);console.log(`Differenz: ${diff} Tage`);

Datumsvergleich:

import { isBefore, isAfter, isEqual } from 'date-fns';

const date1 = new Date(2024, 0, 1);const date2 = new Date(2024, 6, 1);console.log(isBefore(date1, date2)); // true

2. Luxon – leistungsstark und modern

Luxon ist eine Bibliothek von einem der Autoren von Moment.js, die entwickelt wurde, um dessen Nachteile zu beheben. Luxon verwendet eigene unveränderliche Objekte (DateTime, Duration) anstelle des nativen Date. Dies macht es besonders praktisch für die Arbeit mit Zeitzonen und Intervallen.

Hauptmerkmale:

• Unveränderlichkeit: Alle Methoden geben neue Instanzen zurück.
• Integrierte Zeitzonenunterstützung: Ohne zusätzliche Plugins.
• Internationalisierung: Lokalisierung basierend auf der Intl-API.
• Arbeit mit Intervallen und Dauern: Praktische Methoden zur Berechnung von Zeitabständen.

Codebeispiele mit Luxon

Installation:

npm install luxon

Erstellen und Formatieren eines Datums:

import { DateTime } from 'luxon';

const dt = DateTime.fromISO('2024-12-25', { zone: 'Europe/Berlin' });console.log(dt.toFormat('dd.MM.yyyy HH:mm')); // "25.12.2024 00:00"

// Lokalisierte Ausgabeconsole.log(dt.setLocale('de').toFormat('d MMMM yyyy')); // "25 Dezember 2024"

Arbeit mit Zeitzonen:

const nyTime = DateTime.now().setZone('America/New_York');const berlinTime = nyTime.setZone('Europe/Berlin');console.log(`In New York: ${nyTime.toFormat('HH:mm')}, in Berlin: ${berlinTime.toFormat('HH:mm')}`);

Dauern und Intervalle:

import { Duration, Interval } from 'luxon';

const dur = Duration.fromObject({ hours: 5, minutes: 30 });console.log(dur.toFormat('h:mm')); // "5:30"

const start = DateTime.fromISO('2024-01-01');const end = DateTime.fromISO('2024-12-31');const interval = Interval.fromDateTimes(start, end);console.log(interval.length('days')); // 365

3. Day.js – leicht und schnell

Day.js ist eine minimalistische Bibliothek, die eine API bietet, die der von Moment.js ähnelt, aber nur etwa 2 KB groß ist (minimiert und gzippt). Sie ist ideal für Projekte, bei denen die Bundle-Größe kritisch ist.

Hauptmerkmale:

• Leichtgewicht: Sehr kleine Größe (~2 KB).
• Moment.js-kompatible API: Einfacher Umstieg von Moment.js.
• Plugin-System: Erweiterung der Funktionalität bei Bedarf (z. B. Zeitzonen, Lokalisierung).
• Unveränderlichkeit: Operationen geben neue Instanzen zurück.

Codebeispiele mit Day.js

Installation:

npm install dayjs

Datumsformatierung:

import dayjs from 'dayjs';import 'dayjs/locale/de';

dayjs.locale('de');const date = dayjs('2024-12-25');console.log(date.format('DD. MMMM YYYY')); // "25. Dezember 2024"

Datumsmanipulation:

const today = dayjs();const future = today.add(10, 'day');const past = today.subtract(3, 'month');const diff = future.diff(past, 'day');console.log(`Differenz: ${diff} Tage`);

Arbeit mit Zeitzonen (mit Plugin):

import utc from 'dayjs/plugin/utc';import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);dayjs.extend(timezone);

const berlinTime = dayjs().tz('Europe/Berlin');const newYorkTime = dayjs().tz('America/New_York');console.log(`Berlin: ${berlinTime.format('HH:mm')}, New York: ${newYorkTime.format('HH:mm')}`);

Vergleich und Auswahl

Fazit

Die Wahl der Bibliothek hängt von den Anforderungen Ihres Projekts ab:

• Wenn Bundle-Größe kritisch ist, wählen Sie Day.js.
• Wenn Sie funktionale Programmierung und maximale Kontrolle über Importe bevorzugen, wählen Sie date-fns.
• Wenn Sie komplexe Zeitzonen und Intervalle benötigen, wählen Sie Luxon.

Alle drei Bibliotheken bieten eine hervorragende TypeScript-Unterstützung und lösen die grundlegenden Probleme der Arbeit mit Daten. Experimentieren Sie mit ihnen und wählen Sie das Werkzeug, das am besten zu Ihrem Projektstil passt!