Objekte sind das, womit Sie als JavaScript-Entwickler zu tun haben, und das gilt natürlich auch für TypeScript. TypeScript bietet Ihnen mehrere Möglichkeiten, Typdefinitionen für Objekteigenschaften zu definieren. Wir werden uns in diesem Beitrag einige davon ansehen, angefangen mit einfachen Beispielen bis hin zu einigen erweiterten Typdefinitionen.

Verschachtelte Objekte in JavaScript sind Objekte, die andere Objekte oder Arrays als Eigenschaften enthalten. Dies ermöglicht die Erstellung komplexer Datenstrukturen, die reale Entitäten effektiver darstellen können.
In JavaScript können Sie Objekte in anderen Objekten verschachteln. Dies wird auch als Objektverschachtelung oder Objektkomposition bezeichnet. Durch die Objektverschachtelung können Sie komplexe Datenstrukturen erstellen, indem Sie Objekte innerhalb von Objekten organisieren.

Erstellen eines verschachtelten Objekts

Hier ist ein einfaches Beispiel eines verschachtelten Objekts, das ein Benutzerprofil darstellt:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "[email protected]",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Zum Beispiel:
Das userProfile-Objekt verfügt über Eigenschaften wie Benutzername, Alter und Kontakt.
Die Kontakteigenschaft selbst ist ein Objekt, das E-Mail und Telefonnummer enthält.
Die Telefoneigenschaft ist ein weiteres verschachteltes Objekt mit Privat- und Mobiltelefonnummern.

Zugreifen auf Eigenschaften verschachtelter Objekte

Um auf Eigenschaften innerhalb verschachtelter Objekte zuzugreifen, können Sie die Punktnotation oder die Klammernotation verwenden. So können Sie auf die Mobiltelefonnummer des Benutzers zugreifen:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

Sie können auch verschachtelte Eigenschaften ändern. Wenn Sie beispielsweise die Designeinstellung ändern möchten:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

Verwenden von Typen mit verschachtelten Objekten

Bei der Arbeit mit TypeScript können Sie Typen für verschachtelte Objekte definieren, um die Typsicherheit zu gewährleisten. So können Sie einen Typ für das userProfile-Objekt definieren:

type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "[email protected]",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

In diesem TypeScript-Beispiel definiert der UserProfile-Typ die Struktur des userProfile-Objekts und stellt sicher, dass alle Eigenschaften korrekt typisiert sind.

Hier ist ein weiteres Beispiel für verschachtelte Objekte in JavaScript

Sehen wir uns ein komplexeres Beispiel an, das ein Bibliothekssystem darstellt, in dem jedes Buch verschiedene Details hat, einschließlich seines Autors, Herausgebers und Genres.
Verschachtelte Objekte können mit dem Schlüsselwort type selbst definiert werden. TypeScript kann auch die Typdefinitionen eines verschachtelten Objekts in Typdefinitionen abstrahieren. Indexsignaturen können verwendet werden, wenn Sie nicht sicher sind, wie viele Eigenschaften ein Objekt haben wird, Sie sich aber über die Art der Eigenschaften eines Objekts sicher sind

Definieren eines verschachtelten Objekts für ein Bibliothekssystem

So können Sie ein verschachteltes Objekt für dieses Szenario strukturieren:

const library = {
    name: "Central City Library",
    location: {
        address: {
            street: "123 Main St",
            city: "Central City",
            state: "CC",
            zip: "12345"
        },
        coordinates: {
            latitude: 40.7128,
            longitude: -74.0060
        }
    },
    books: [
        {
            title: "JavaScript: The Good Parts",
            author: {
                firstName: "Douglas",
                lastName: "Crockford"
            },
            publishedYear: 2008,
            genres: ["Programming", "Technology"],
            availableCopies: 5
        },
        {
            title: "Clean Code",
            author: {
                firstName: "Robert",
                lastName: "C. Martin"
            },
            publishedYear: 2008,
            genres: ["Programming", "Software Engineering"],
            availableCopies: 3
        }
    ],
    totalBooks: function() {
        return this.books.length;
    }
};

Lassen Sie uns die Struktur verschachtelter Objekte aufschlüsseln

• Bibliotheksobjekt: Stellt die gesamte Bibliothek dar und enthält Eigenschaften wie Name, Standort und Bücher.
• Standortobjekt: Enthält verschachtelte Objekte für Adresse und Koordinaten.
• Adresse umfasst Straße, Stadt, Bundesland und Postleitzahl. Koordinaten speichert Breiten- und Längengrad.
• Bücher-Array: Ein Array, das mehrere Buchobjekte enthält, von denen jedes Folgendes enthält:
• Titel: Der Titel des Buchs.
• Autorenobjekt: Verschachteltes Objekt, das Vorname und Nachname des Autors enthält.

-Veröffentlichungsjahr: Das Jahr, in dem das Buch veröffentlicht wurde.
-Genres: Eine Reihe von Genres, zu denen das Buch gehört.
-Verfügbare Exemplare: Eine Zahl, die angibt, wie viele Exemplare verfügbar sind.

Auf Daten zugreifen und diese bearbeiten

Sie können auf verschiedene Arten auf dieses verschachtelte Objekt zugreifen und es bearbeiten. So ermitteln Sie den Autor des ersten Buches:

const firstBookAuthor = library.books[0].author;
console.log(`${firstBookAuthor.firstName} ${firstBookAuthor.lastName}`); 
// Output: Douglas Crockford

So fügen Sie der Bibliothek ein neues Buch hinzu:

library.books.push({
    title: "The Pragmatic Programmer",
    author: {
        firstName: "Andrew",
        lastName: "Hunt"
    },
    publishedYear: 1999,
    genres: ["Programming", "Career"],
    availableCopies: 4
});

Verwenden einer Methode im Objekt

Sie können auch im Objekt definierte Methoden verwenden. Um beispielsweise die Gesamtzahl der Bücher zu ermitteln:

console.log(library.totalBooks()); // Output: 3

Dieses Beispiel veranschaulicht, wie verschachtelte Objekte verwendet werden können, um eine umfassendere Struktur zur Darstellung komplexer Daten, beispielsweise eines Bibliothekssystems, zu erstellen. Durch die gemeinsame Organisation zusammengehöriger Informationen können Sie die Daten einfach verwalten und auf sinnvolle Weise mit ihnen interagieren.

Ein weiteres verschachteltes Beispiel

Um die Codeorganisation und Wartbarkeit zu verbessern, können Sie verschachtelte Objekte in separate Typen abstrahieren. Mit diesem Ansatz können Sie einen Caterer-Typ separat definieren und ihn innerhalb des Train-Typs verwenden. So können Sie dies in TypeScript tun:

// Define the type for Caterer
type Caterer = {
    name: string;   // Name of the catering company
    address: string; // Address of the catering company
    phone: number;   // Phone number of the catering company
};

Den Zugtyp definieren
Als Nächstes definieren wir den Train-Typ, der den Caterer-Typ für seine Caterer-Eigenschaft verwendet.

// Define the type for Train
type Train = {
    model: string;                // Model of the train
    trainNumber: string;          // Unique train number
    timeOfDeparture: Date;        // Departure time
    timeOfArrival: Date;          // Arrival time
    caterer: Caterer;             // Reference to the Caterer type
};

Beispiel eines Zugobjekts

Jetzt können wir eine Instanz des Typs „Zug“ erstellen, einschließlich der Caterer-Details.

// Example of a Train object
const train: Train = {
    model: "Shinkansen N700",
    trainNumber: "S1234",
    timeOfDeparture: new Date("2024-10-25T09:00:00Z"),
    timeOfArrival: new Date("2024-10-25T11:30:00Z"),
    caterer: {
        name: "Gourmet Train Catering",
        address: "123 Culinary Ave, Tokyo",
        phone: 1234567890,
    },
};

Die Vorteile dieses Ansatzes sind:

• Wiederverwendbarkeit: Der Caterer-Typ kann in anderen Teilen Ihres Codes wiederverwendet werden, beispielsweise in verschiedenen Transportarten (z. B. Flugzeuge, Busse).
• Klarheit: Durch die Trennung des Typs „Caterer“ wird der Typ „Zug“ klarer und verständlicher.
• Wartbarkeit: Wenn sich die Struktur des Caterers ändert, müssen Sie sie nur an einer Stelle aktualisieren.

Durch die Abstraktion verschachtelter Objekte in separate Typen können Sie die Organisation und Klarheit Ihres TypeScript-Codes verbessern. Dieser Ansatz ermöglicht eine bessere Wiederverwendbarkeit und Wartbarkeit und erleichtert die Verwaltung komplexer Datenstrukturen.

Fassen wir noch einmal zusammen

Verschachtelte Objekte sind eine leistungsstarke Funktion in JavaScript, die die Organisation komplexer Datenstrukturen ermöglicht.

Durch die Verwendung verschachtelter Objekte können Sie aussagekräftigere Darstellungen von Daten erstellen, wodurch Ihr Code einfacher zu verstehen und zu warten ist. Darüber hinaus kann die Verwendung von TypeScript dazu beitragen, die Struktur- und Typsicherheit beim Umgang mit diesen komplexen Objekten durchzusetzen.