TypeScript - Date Object: A Beginner's Guide

Hallo da, zukünftiger Codingsuperstar! Heute begeben wir uns auf eine aufregende Reise in die Welt der Daten in TypeScript. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials wirst du Daten wie ein Profi manipulieren können!

Was ist ein Date-Objekt?

Bevor wir uns den Details widmen, lassen Sie uns darüber sprechen, was ein Date-Objekt eigentlich ist. In TypeScript (und JavaScript) repräsentiert ein Date-Objekt einen einzigen Zeitpunkt. Es ist wie ein Schnappschuss eines bestimmten Datums und einer bestimmten Uhrzeit, den wir dann in unseren Programmen manipulieren und verwenden können.

Denke daran als eine digitale Uhr, die du auf jede Zeit einstellen kannst, Vergangenheit, Gegenwart oder Zukunft. Cool, oder?

Syntax: Erstellen eines Date-Objekts

Nun schauen wir uns an, wie wir ein Date-Objekt in TypeScript erstellen können. Es gibt mehrere Möglichkeiten, und ich werde dir jede mit Beispielen zeigen.

1. Aktuelles Datum und Uhrzeit

Um ein Date-Objekt mit dem aktuellen Datum und der aktuellen Uhrzeit zu erstellen, verwendest du den new Date()-Konstruktor ohne Argumente.

let currentDate = new Date();
console.log(currentDate);

Wenn du diesen Code ausführst, wirst du etwas wie folgendes sehen:

2023-06-15T12:30:45.678Z

Das mag ein bisschen einschüchternd aussehen, aber keine Sorge! Es zeigt dir nur das aktuelle Datum und die aktuelle Uhrzeit in einem standardisierten Format.

2. Bestimmtes Datum und Uhrzeit

Du kannst auch ein Date-Objekt für ein bestimmtes Datum und eine bestimmte Uhrzeit erstellen. Es gibt mehrere Möglichkeiten, dies zu tun:

a. Verwendung eines Datumstrings

let christmas = new Date("December 25, 2023 00:00:00");
console.log(christmas);

Das gibt Folgendes aus:

2023-12-25T00:00:00.000Z

b. Verwendung separater Parameter

let newYear = new Date(2024, 0, 1, 0, 0, 0);
console.log(newYear);

Das gibt Folgendes aus:

2024-01-01T00:00:00.000Z

Beachte, dass der Monat für Januar 0 ist. In JavaScript und TypeScript sind Monate null-basiert, was bedeutet, dass Januar 0, Februar 1 und so weiter ist. Das ist ein Kuriosum, das viele Anfänger erwischt, also behalte es im Gedächtnis!

c. Verwendung von Millisekunden seit der Epoch

Du kannst auch ein Datum erstellen, indem du die Anzahl der Millisekunden seit dem 1. Januar 1970 (bekannt als die "Epoch") angibst:

let someDate = new Date(1687012345678);
console.log(someDate);

Das gibt ein Datum und eine Uhrzeit aus, die korrespondieren zu der Anzahl der Millisekunden nach der Epoch.

Arbeiten mit Date-Objekten

Nun, da wir wissen, wie wir Date-Objekte erstellen, schauen wir uns einige der Dinge an, die wir damit tun können.

Datumskomponenten abrufen

Date-Objekte haben mehrere Methoden, um verschiedene Komponenten des Datums abzurufen:

let today = new Date();

console.log("Vollständiges Jahr:", today.getFullYear());
console.log("Monat:", today.getMonth());
console.log("Datum:", today.getDate());
console.log("Tag:", today.getDay());
console.log("Stunden:", today.getHours());
console.log("Minuten:", today.getMinutes());
console.log("Sekunden:", today.getSeconds());

Das könnte eine Ausgabe wie diese liefern:

Vollständiges Jahr: 2023
Monat: 5
Datum: 15
Tag: 4
Stunden: 12
Minuten: 45
Sekunden: 30

Denke daran, getMonth() gibt einen null-basierten Monat zurück, sodass 5 Juni bedeutet!

Datumskomponenten setzen

genau wie wir Komponenten eines Datums abrufen können, können wir sie auch setzen:

let futureDate = new Date();

futureDate.setFullYear(2025);
futureDate.setMonth(11);  // Dezember
futureDate.setDate(31);
futureDate.setHours(23);
futureDate.setMinutes(59);
futureDate.setSeconds(59);

console.log(futureDate);

Das wird das Datum auf den 31. Dezember 2025 um 23:59:59 setzen.

Datum formatieren

TypeScript (und JavaScript) bieten einige integrierte Methoden zur Formatierung von Daten:

let event = new Date("July 4, 2023 12:00:00");

console.log(event.toDateString());
console.log(event.toTimeString());
console.log(event.toLocaleDateString());
console.log(event.toLocaleTimeString());
console.log(event.toISOString());

Das gibt Folgendes aus:

Di Jul 04 2023
12:00:00 GMT+0000 (Coordinated Universal Time)
7/4/2023
12:00:00 PM
2023-07-04T12:00:00.000Z

Datumarithmetik

Eine der coolsten Sachen an Date-Objekten ist, dass wir mit ihnen rechnen können! Schauen wir uns einige Beispiele an:

Tage hinzufügen

let today = new Date();
let nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);

console.log("Heute:", today);
console.log("Nächste Woche:", nextWeek);

Das fügt 7 Tage zum aktuellen Datum hinzu. Wir multiplizieren 7 (Tage) mit 24 (Stunden) mit 60 (Minuten) mit 60 (Sekunden) mit 1000 (Millisekunden), um die Anzahl der Millisekunden in einer Woche zu erhalten.

Daten subtrahieren

Wir können auch den Unterschied zwischen zwei Daten finden:

let start = new Date("March 1, 2023");
let end = new Date("June 15, 2023");

let difference = end.getTime() - start.getTime();
let days = Math.floor(difference / (24 * 60 * 60 * 1000));

console.log(`Es gibt ${days} Tage zwischen ${start.toDateString()} und ${end.toDateString()}`);

Das berechnet die Anzahl der Tage zwischen dem 1. März 2023 und dem 15. Juni 2023.

Schlussfolgerung

Glückwunsch! Du hast gerade deine ersten Schritte in die Welt der Date-Objekte in TypeScript unternommen. Wir haben das Erstellen von Daten, das Abrufen und Setzen von Datumskomponenten, das Formatieren von Daten und sogar die Durchführung von Datumarithmetik behandelt.

Denke daran, dass das Arbeiten mit Daten manchmal knifflig sein kann, insbesondere bei der Handhabung verschiedener Zeitzone oder Sommerzeit. Aber mit Übung wirst du zunehmend sicherer und geschickter.

Hier ist eine Tabelle, die die Hauptmethoden zusammenfasst, die wir behandelt haben:

Methode	Beschreibung
new Date()	Erstellt ein neues Date-Objekt
getFullYear()	Gibt das Jahr (4 Stellen) zurück
getMonth()	Gibt den Monat (0-11) zurück
getDate()	Gibt den Tag des Monats (1-31) zurück
getDay()	Gibt den Wochentag (0-6) zurück
getHours()	Gibt die Stunde (0-23) zurück
getMinutes()	Gibt die Minuten (0-59) zurück
getSeconds()	Gibt die Sekunden (0-59) zurück
setFullYear()	Setzt das Jahr
setMonth()	Setzt den Monat
setDate()	Setzt den Tag des Monats
setHours()	Setzt die Stunde
setMinutes()	Setzt die Minuten
setSeconds()	Setzt die Sekunden
toDateString()	Gibt den Datumsteil als menschenlesbaren String zurück
toTimeString()	Gibt den Zeitteil als menschenlesbaren String zurück
toLocaleDateString()	Gibt den Datumsteil unter Verwendung von Lokalkonventionen zurück
toLocaleTimeString()	Gibt den Zeitteil unter Verwendung von Lokalkonventionen zurück
toISOString()	Gibt das Datum im ISO-Format zurück

Weiter üben, weiter coden und vor allem: Spaß haben! Die Welt der Programmierung ist voller spannender Möglichkeiten, und das Beherrschen von Daten ist erst der Anfang. Viel Spaß beim Coden!

Credits: Image by storyset