Los objetos son con lo que te enfrentas trabajando como desarrollador de JavaScript, y no hace falta decir que eso también se aplica a TypeScript. TypeScript le proporciona múltiples formas de definir definiciones de tipos para propiedades de objetos. Veremos un par de ellos a lo largo de esta publicación, comenzando con ejemplos simples y pasando a algunas definiciones de tipos avanzadas.

Los objetos anidados en JavaScript son objetos que contienen otros objetos o matrices como propiedades. Esto permite la creación de estructuras de datos complejas que pueden representar entidades del mundo real de manera más efectiva.
En JavaScript, puedes anidar objetos dentro de otros objetos. Esto también se conoce como anidamiento de objetos o composición de objetos. El anidamiento de objetos le permite crear estructuras de datos complejas organizando objetos dentro de objetos.

Crear un objeto anidado

Aquí hay un ejemplo sencillo de un objeto anidado que representa un perfil de usuario:

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

Por ejemplo:
El objeto userProfile tiene propiedades como nombre de usuario, edad y contacto.
La propiedad de contacto en sí es un objeto que contiene correo electrónico y teléfono.
La propiedad del teléfono es otro objeto anidado con números de casa y de móvil.

Acceder a las propiedades de objetos anidados

Para acceder a las propiedades dentro de objetos anidados, puede utilizar la notación de puntos o la notación de corchetes. Así es como puede acceder al número de teléfono móvil del usuario:

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

También puedes modificar propiedades anidadas. Por ejemplo, si desea cambiar la preferencia del tema:

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

Usar tipos con objetos anidados

Al trabajar con TypeScript, puede definir tipos de objetos anidados para garantizar la seguridad de tipos. Así es como puedes definir un tipo para el objeto 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"
    }
};

En este ejemplo de TypeScript, el tipo UserProfile define la estructura del objeto userProfile, asegurando que todas las propiedades estén escritas correctamente.

Aquí hay otro ejemplo de objetos anidados en JavaScript.

Veamos un ejemplo más complejo que representa un sistema de biblioteca, donde cada libro tiene varios detalles, incluido su autor, editorial y géneros.
Los objetos anidados se pueden definir utilizando la propia palabra clave tipo. TypeScript también puede abstraer las definiciones de tipo de un objeto anidado en definiciones de tipo. Las firmas de índice se pueden utilizar cuando no está seguro de cuántas propiedades tendrá un objeto pero está seguro del tipo de propiedades de un objeto

Definición de un objeto anidado para un sistema de biblioteca

Así es como puedes estructurar un objeto anidado para este escenario:

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

Desglosemos la estructura de objetos anidados.

• Objeto de biblioteca: representa toda la biblioteca y contiene propiedades como nombre, ubicación y libros.
• Objeto de ubicación: contiene objetos anidados para direcciones y coordenadas.
• la dirección incluye calle, ciudad, estado y código postal. coordenadas almacena latitud y longitud.
• Matriz de libros: una matriz que contiene varios objetos de libro, cada uno de los cuales contiene:
• Título: El título del libro.
• Objeto de autor: objeto anidado que incluye el nombre y apellido del autor.

-Año de publicación: El año en que se publicó el libro.
-Géneros: conjunto de géneros a los que pertenece el libro.
-Copias disponibles: Un número que indica cuántas copias hay disponibles.

Acceso y manipulación de datos

Puedes acceder y manipular este objeto anidado de varias maneras. Aquí se explica cómo encontrar al autor del primer libro:

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

Para agregar un nuevo libro a la biblioteca:

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

Usando un método en el objeto

También puede utilizar métodos definidos en el objeto. Por ejemplo, para obtener el número total de libros:

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

Este ejemplo ilustra cómo se pueden utilizar objetos anidados para crear una estructura más completa para representar datos complejos, como un sistema de biblioteca. Al organizar la información relacionada en conjunto, puede administrar fácilmente los datos e interactuar con ellos de manera significativa.

Otro ejemplo anidado

Para mejorar la organización y el mantenimiento del código, puede abstraer objetos anidados en tipos separados. Este enfoque le permite definir un tipo de Catering por separado y utilizarlo dentro del tipo de Tren. Así es como puedes hacer esto en 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
};

Definición del tipo de tren
A continuación, definiremos el tipo de Tren, que utilizará el tipo Caterer para su propiedad de catering.

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

Ejemplo de un objeto de tren

Ahora podemos crear una instancia del tipo Tren, incluidos los detalles del proveedor.

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

Los beneficios de este enfoque son:

• Reutilizabilidad: el tipo Caterer se puede reutilizar en otras partes de su código, como en diferentes tipos de transporte (por ejemplo, aviones, autobuses).
• Claridad: separar el tipo de Catering hace que el tipo de Tren sea más limpio y fácil de entender.
• Mantenibilidad: Si la estructura del Caterer cambia, solo necesitas actualizarla en un solo lugar.

Al abstraer objetos anidados en tipos separados, puede mejorar la organización y claridad de su código TypeScript. Este enfoque permite una mejor reutilización y mantenibilidad, lo que facilita la gestión de estructuras de datos complejas.

recapitulemos

Los objetos anidados son una característica poderosa en JavaScript que permite la organización de estructuras de datos complejas.

Al utilizar objetos anidados, puede crear representaciones de datos más significativas, lo que hace que su código sea más fácil de entender y mantener. Además, el uso de TypeScript puede ayudar a reforzar la estructura y la seguridad de tipos al trabajar con estos objetos complejos.