Objetos são o que você está lidando ao trabalhar como desenvolvedor JavaScript, e nem é preciso dizer que isso também vale para TypeScript. TypeScript fornece várias maneiras de definir definições de tipo para propriedades de objetos. Veremos alguns deles ao longo deste post, começando com exemplos simples e passando para algumas definições de tipo avançadas.

Objetos aninhados em JavaScript são objetos que contêm outros objetos ou matrizes como suas propriedades. Isso permite a criação de estruturas de dados complexas que podem representar entidades do mundo real de forma mais eficaz.
Em JavaScript, você pode aninhar objetos dentro de outros objetos. Isso também é conhecido como aninhamento de objetos ou composição de objetos. O aninhamento de objetos permite criar estruturas de dados complexas organizando objetos dentro de objetos.

Criando um objeto aninhado

Aqui está um exemplo simples de um objeto aninhado que representa um perfil de usuário:

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 exemplo:
O objeto userProfile possui propriedades como nome de usuário, idade e contato.
A propriedade contact em si é um objeto contendo email e telefone.
A propriedade phone é outro objeto aninhado com números residenciais e celulares.

Acessando propriedades de objetos aninhados

Para acessar propriedades em objetos aninhados, você pode usar notação de ponto ou colchete. Veja como você pode acessar o número do celular do usuário:

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

Você também pode modificar propriedades aninhadas. Por exemplo, se você quiser alterar a preferência do tema:

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

Usando tipos com objetos aninhados

Ao trabalhar com TypeScript, você pode definir tipos para objetos aninhados para garantir a segurança do tipo. Veja como você pode definir um tipo para o 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"
    }
};

Neste exemplo de TypeScript, o tipo UserProfile define a estrutura do objeto userProfile, garantindo que todas as propriedades sejam digitadas corretamente.

Aqui está outro exemplo de objetos aninhados em JavaScript

Vejamos um exemplo mais complexo que representa um sistema de biblioteca, onde cada livro possui vários detalhes, incluindo autor, editora e gêneros.
Objetos aninhados podem ser definidos usando a própria palavra-chave type. O TypeScript também pode abstrair as definições de tipo de um objeto aninhado em definições de tipo. Assinaturas de índice podem ser usadas quando você não tem certeza de quantas propriedades um objeto terá, mas tem certeza do tipo de propriedades de um objeto

Definindo um objeto aninhado para um sistema de biblioteca

Veja como você pode estruturar um objeto aninhado para este cenário:

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

Vamos detalhar a estrutura de objetos aninhados

• Objeto Biblioteca: Representa toda a biblioteca e contém propriedades como nome, localização e livros.
• Objeto de localização: contém objetos aninhados para endereço e coordenadas.
• o endereço inclui rua, cidade, estado e CEP. coordenadas armazenam latitude e longitude.
• Books Array: um array que contém vários objetos de livro, cada um contendo:
• Título: O título do livro.
• Objeto Autor: Objeto aninhado que inclui firstName e lastName do autor.

-Ano de publicação: o ano em que o livro foi publicado.
-Gêneros: uma variedade de gêneros aos quais o livro pertence.
-Cópias disponíveis: um número que indica quantas cópias estão disponíveis.

Acessando e manipulando dados

Você pode acessar e manipular esse objeto aninhado de várias maneiras. Veja como conseguir o autor do primeiro livro:

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

Para adicionar um novo livro à biblioteca:

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

Usando um método no objeto

Você também pode utilizar métodos definidos no objeto. Por exemplo, para obter o número total de livros:

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

Este exemplo ilustra como objetos aninhados podem ser usados ​​para criar uma estrutura mais abrangente para representar dados complexos, como um sistema de biblioteca. Ao organizar as informações relacionadas em conjunto, você pode gerenciar e interagir facilmente com os dados de maneira significativa.

Outro exemplo aninhado

Para melhorar a organização e a manutenção do código, você pode abstrair objetos aninhados em tipos separados. Essa abordagem permite definir um tipo de Fornecedor separadamente e usá-lo dentro do tipo Trem. Veja como você pode fazer isso no 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
};

Definindo o tipo de trem
A seguir, definiremos o tipo Train, que usará o tipo Caterer para sua propriedade 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
};

Exemplo de objeto de trem

Agora, podemos criar uma instância do tipo Train, incluindo os detalhes do fornecedor.

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

Os benefícios desta abordagem são:

• Reutilização: O tipo Caterer pode ser reutilizado em outras partes do seu código, como em diferentes tipos de transporte (por exemplo, aviões, ônibus).
• Clareza: separar o tipo Fornecedor torna o tipo Trem mais limpo e fácil de entender.
• Manutenção: Se a estrutura do fornecedor mudar, você só precisará atualizá-la em um só lugar.

Ao abstrair objetos aninhados em tipos separados, você pode melhorar a organização e a clareza do seu código TypeScript. Essa abordagem permite melhor reutilização e manutenção, facilitando o gerenciamento de estruturas de dados complexas.

Vamos recapitular

Objetos aninhados são um recurso poderoso em JavaScript que permite a organização de estruturas de dados complexas.

Ao usar objetos aninhados, você pode criar representações de dados mais significativas, tornando seu código mais fácil de entender e manter. Além disso, o uso do TypeScript pode ajudar a reforçar a segurança da estrutura e do tipo ao lidar com esses objetos complexos.