Les objets sont ce à quoi vous avez affaire en tant que développeur JavaScript, et il va sans dire que cela est également vrai pour TypeScript. TypeScript vous offre plusieurs façons de définir des définitions de type pour les propriétés d'objet. Nous en examinerons quelques-uns tout au long de cet article, en commençant par des exemples simples et en passant à quelques définitions de types avancées.

Les objets imbriqués en JavaScript sont des objets qui contiennent d'autres objets ou tableaux comme propriétés. Cela permet la création de structures de données complexes qui peuvent représenter plus efficacement les entités du monde réel.
En JavaScript, vous pouvez imbriquer des objets dans d'autres objets. Ceci est également connu sous le nom d’imbrication d’objets ou de composition d’objets. L'imbrication d'objets vous permet de créer des structures de données complexes en organisant des objets au sein d'objets.

Création d'un objet imbriqué

Voici un exemple simple d'objet imbriqué représentant un profil utilisateur :

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"
    }
};

Par exemple:
L'objet userProfile possède des propriétés telles que le nom d'utilisateur, l'âge et le contact.
La propriété contact elle-même est un objet contenant l'e-mail et le téléphone.
La propriété du téléphone est un autre objet imbriqué avec des numéros personnels et mobiles.

Accès aux propriétés des objets imbriqués

Pour accéder aux propriétés des objets imbriqués, vous pouvez utiliser la notation par points ou par crochets. Voici comment accéder au numéro de téléphone mobile de l'utilisateur :

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

Vous pouvez également modifier les propriétés imbriquées. Par exemple, si vous souhaitez modifier la préférence du thème :

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

Utilisation de types avec des objets imbriqués

Lorsque vous travaillez avec TypeScript, vous pouvez définir des types pour les objets imbriqués afin de garantir la sécurité des types. Voici comment définir un type pour l'objet userProfile :

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"
    }
};

Dans cet exemple TypeScript, le type UserProfile définit la structure de l'objet userProfile, garantissant que toutes les propriétés sont correctement saisies.

Voici un autre exemple d'objets imbriqués en JavaScript

Regardons un exemple plus complexe qui représente un système de bibliothèque, dans lequel chaque livre comporte divers détails, notamment son auteur, son éditeur et ses genres.
Les objets imbriqués peuvent être définis à l'aide du mot-clé type lui-même. TypeScript peut également résumer les définitions de type d'un objet imbriqué dans des définitions de type. Les signatures d'index peuvent être utilisées lorsque vous n'êtes pas sûr du nombre de propriétés qu'un objet aura mais que vous êtes sûr du type de propriétés d'un objet

Définition d'un objet imbriqué pour un système de bibliothèque

Voici comment structurer un objet imbriqué pour ce scénario :

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;
    }
};

Décomposons la structure des objets imbriqués

• Objet Bibliothèque : représente l'intégralité de la bibliothèque et contient des propriétés telles que le nom, l'emplacement et les livres.
• Objet de localisation : contient des objets imbriqués pour l'adresse et les coordonnées.
• l'adresse comprend la rue, la ville, l'état et le code postal. les coordonnées stockent la latitude et la longitude.
• Tableau de livres : un tableau contenant plusieurs objets de livre, chacun contenant :
• Titre : le titre du livre.
• Objet Auteur : objet imbriqué qui inclut le prénom et le nom de l'auteur.

-Année de publication : année de publication du livre.
-Genres : un éventail de genres auxquels appartient le livre.
-Exemplaires disponibles : un nombre indiquant le nombre d'exemplaires disponibles.

Accès et manipulation des données

Vous pouvez accéder et manipuler cet objet imbriqué de différentes manières. Voici comment obtenir l'auteur du premier livre :

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

Pour ajouter un nouveau livre à la bibliothèque :

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

Utiliser une méthode dans l'objet

Vous pouvez également utiliser des méthodes définies dans l'objet. Par exemple, pour obtenir le nombre total de livres :

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

Cet exemple illustre comment des objets imbriqués peuvent être utilisés pour créer une structure plus complète pour représenter des données complexes, comme un système de bibliothèque. En organisant les informations associées ensemble, vous pouvez facilement gérer et interagir avec les données de manière significative.

Un autre exemple imbriqué

Pour améliorer l'organisation et la maintenabilité du code, vous pouvez résumer les objets imbriqués en types distincts. Cette approche vous permet de définir un type Traiteur séparément et de l'utiliser dans le type Train. Voici comment procéder dans TypeScript :

// 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
};

Définition du type de train
Ensuite, nous définirons le type Train, qui utilisera le type Traiteur pour sa propriété traiteur.

// 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
};

Exemple d'un objet de train

Maintenant, nous pouvons créer une instance de type Train, incluant les détails du traiteur.

// 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,
    },
};

Les avantages de cette approche sont les suivants :

• Réutilisabilité : le type Traiteur peut être réutilisé dans d'autres parties de votre code, par exemple dans différents types de transport (par exemple, avions, bus).
• Clarté : la séparation du type Traiteur rend le type Train plus propre et plus facile à comprendre.
• Maintenabilité : Si la structure du Traiteur change, il vous suffit de la mettre à jour à un seul endroit.

En abstrait les objets imbriqués en types distincts, vous pouvez améliorer l'organisation et la clarté de votre code TypeScript. Cette approche permet une meilleure réutilisabilité et maintenabilité, facilitant ainsi la gestion de structures de données complexes.

Récapitulons

Les objets imbriqués sont une fonctionnalité puissante de JavaScript qui permet d'organiser des structures de données complexes.

En utilisant des objets imbriqués, vous pouvez créer des représentations de données plus significatives, ce qui rend votre code plus facile à comprendre et à gérer. De plus, l'utilisation de TypeScript peut aider à renforcer la sécurité de la structure et des types lors du traitement de ces objets complexes.