Deutsch (DE) Übersetzung

TypeScript - Objekte: Ein Anfängerleitfaden

Hallo da draußen, zukünftiger Codingsuperstar! Heute machen wir uns auf eine aufregende Reise in die Welt der TypeScript-Objekte. Mach dir keine Sorgen, wenn du noch nie codiert hast – ich werde dein freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials wirst du sicher mit Objekten arbeiten können, wie ein Profi!

Was sind Objekte?

Bevor wir uns den spezifischen TypeScript-Teil anschauen, sprechen wir darüber, was Objekte in der Programmierung sind. Stell dir vor, du hast einen Rucksack. Dieser Rucksack kann verschiedene Gegenstände enthalten, die jeweils ihre eigenen Eigenschaften haben. In der Programmierung ist ein Objekt wie dieser Rucksack – es ist ein Behälter, der verschiedene zusammenhängende Informationen enthalten kann.

Syntax: Wie man Objekte in TypeScript erstellt

Lassen wir mit den Grundlagen beginnen. In TypeScript können wir Objekte mit einer Methode namens "objektliteral notation" erstellen. Das klingt kompliziert, ist aber eigentlich ziemlich einfach. Hier ist ein Beispiel:

let meinRucksack = {
farbe: "blau",
kapazitaet: 20,
istWasserdicht: true
};

In diesem Beispiel ist meinRucksack unser Objekt. Es hat drei Eigenschaften: farbe, kapazitaet und istWasserdicht. Jede Eigenschaft hat einen zugeordneten Wert.

Typenannotationen: TypeScript mit den erwarteten Daten types mitteilen

Eine der coolen Funktionen von TypeScript ist, dass wir dem Compiler genau mitteilen können, welche Datenarten wir in unserem Objekt erwarten. Das nennt man "Typenannotation". Lassen wir unser Rucksack-Beispiel erweitern:

let meinRucksack: {
farbe: string;
kapazitaet: number;
istWasserdicht: boolean;
} = {
farbe: "blau",
kapazitaet: 20,
istWasserdicht: true
};

Hier teilen wir TypeScript mit, dass farbe immer eine Zeichenkette sein soll, kapazitaet immer eine Zahl und istWasserdicht immer ein Boolean-Wert sein soll. Das hilft dabei, Fehler frühzeitig zu erkennen und den Code zuverlässiger zu machen.

Objektliteral notation: Ein genaueres Blick

Wir haben bereits die objektliteral notation in Aktion gesehen, aber lassen wir uns die Syntax genauer ansehen. Sie folgt diesem Muster:

let objectName = {
property1: value1,
property2: value2,
// ... und so weiter
};

Jede Eigenschaft wird durch ein Komma getrennt, und das gesamte Objekt wird in geschweifte Klammern {} eingeschlossen. Es ist wie das Packen von Gegenständen in unseren Rucksack, wobei jeder Gegenstand einen Namen (die Eigenschaft) und eine Beschreibung (der Wert) hat.

TypeScript-Typenvorlage: Wiederverwendbare Objekttypen

Manchmal möchten wir mehrere Objekte mit der gleichen Struktur erstellen. Da kommen TypeScript-Typenvorlagen sehr gelegen. Wir können einen Typ einmal definieren und ihn wiederverwenden:

type Rucksack = {
farbe: string;
kapazitaet: number;
istWasserdicht: boolean;
};

let meinRucksack: Rucksack = {
farbe: "blau",
kapazitaet: 20,
istWasserdicht: true
};

let rucksackDesFreundes: Rucksack = {
farbe: "rot",
kapazitaet: 15,
istWasserdicht: false
};

Dieser Rucksack-Typ fungiert wie ein Bauplan, der sicherstellt, dass jedes Objekt des Typs Rucksack die richtige Struktur hat.

Objekte als Funktion参数: Unsere Rucksäcke weiterreichen

Objekte können an Funktionen übergeben werden, was es ermöglicht, mit komplexen Datenstrukturen zu arbeiten. Hier ist ein Beispiel:

function beschreibeRucksack(rucksack: Rucksack): string {
return `Dieser ${rucksack.farbe} Rucksack hat eine Kapazität von ${rucksack.kapazitaet} Liter und ist ${rucksack.istWasserdicht ? "wasserdicht" : "nicht wasserdicht"}.`;
}

console.log(beschreibeRucksack(meinRucksack));
// Ausgabe: Dieser blaue Rucksack hat eine Kapazität von 20 Liter und ist wasserdicht.

In dieser Funktion übergeben wir unser Rucksack-Objekt und verwenden seine Eigenschaften, um eine Beschreibung zu erstellen.

Anonyme Objekte: Rucksäcke ohne Namen

Manchmal müssen wir Objekte improvisiert erstellen, ohne sie einer Variablen zuzuweisen. Diese werden als anonyme Objekte bezeichnet:

function druckeRucksackFarbe(rucksack: { farbe: string }): void {
console.log(`Der Rucksack ist ${rucksack.farbe}.`);
}

druckeRucksackFarbe({ farbe: "grün" });
// Ausgabe: Der Rucksack ist grün.

Hier erstellen wir ein Objekt direkt in der Funktionserwähnung. Es ist, als ob man einem jemanden einen Rucksack beschreibt, ohne den Rucksack selbst dabei zu haben.

Duck-typing: Wenn es wie ein Ente aussieht und wie eine Ente quakt...

TypeScript verwendet ein Konzept namens "duck-typing". Die Idee ist: Wenn es wie eine Ente aussieht und wie eine Ente quakt, ist es wahrscheinlich eine Ente. In TypeScript-Sprache bedeutet das, dass die Form eines Objekts wichtiger ist als sein expliziter Typ:

interface Tasche {
farbe: string;
carry(): void;
}

let meinRucksack = {
farbe: "violett",
kapazitaet: 25,
carry: function() { console.log("Den Rucksack tragen"); }
};

function benutzeTasche(tasche: Tasche) {
console.log(`Eine ${tasche.farbe} Tasche verwenden`);
tasche.carry();
}

benutzeTasche(meinRucksack); // Das funktioniert!

Selbst though meinRucksack nicht explizit als Tasche deklariert wurde, hat es alle Eigenschaften und Methoden, die eine Tasche haben sollte,also allows TypeScript es.

Abschluss unserer Rucksack-Abenteuer

Glückwunsch! Du hast gerade deinen ersten TypeScript-Objekt-Rucksack mit Wissen gepackt. Denke daran, Objekte sind in der Programmierung unglaublich mächtig – sie ermöglichen es uns, zusammenhängende Daten und Funktionalität zu gruppieren, genau wie ein echter Rucksack all deine Wander-ausrüstung an einem Ort hält.

Während du deine编码-Reise fortsetzt, wirst du überall Objekte finden. Sie sind die Bausteine komplexer Anwendungen, von einfachen To-Do-Listen bis hin zu fortgeschrittenen Webanwendungen. Übe weiter, und bald wirst du Objekte mühelos erstellen und manipulieren können!

Hier ist eine kurze Referenztabelle der Methoden, die wir behandelt haben:

Methode	Beschreibung
Objektliteral Notation	Erstellen von Objekten mit {} Syntax
Typenannotation	Festlegen der Struktur eines Objekts
Typenvorlage	Erstellen wiederverwendbarer Objekttypen
Objekte als Funktion参数	Übergeben von Objekten an Funktionen
Anonyme Objekte	Erstellen von Objekten ohne Variablenzuweisung
Duck-typing	Typüberprüfung basierend auf der Form des Objekts

Frohes Coden und möge deine TypeScript-Objekte immer frei von Fehlern sein und voller aufregender Eigenschaften!

Credits: Image by storyset