Объекты — это то, с чем вы имеете дело, работая разработчиком JavaScript, и, разумеется, это справедливо и для TypeScript. TypeScript предоставляет вам несколько способов определения определений типов для свойств объекта. В этом посте мы рассмотрим несколько из них, начиная с простых примеров и переходя к более сложным определениям типов.

Вложенные объекты в JavaScript — это объекты, которые содержат в качестве своих свойств другие объекты или массивы. Это позволяет создавать сложные структуры данных, которые могут более эффективно представлять объекты реального мира.
В JavaScript вы можете вкладывать объекты в другие объекты. Это также известно как вложение объектов или композиция объектов. Вложенность объектов позволяет создавать сложные структуры данных путем организации объектов внутри объектов.

Создание вложенного объекта

Вот простой пример вложенного объекта, представляющего профиль пользователя:

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

Например:
Объект userProfile имеет такие свойства, как имя пользователя, возраст и контакт.
Свойство contact само по себе является объектом, содержащим адрес электронной почты и телефон.
Свойство телефона — это еще один вложенный объект с домашними и мобильными номерами.

Доступ к свойствам вложенных объектов

Для доступа к свойствам внутри вложенных объектов вы можете использовать запись через точку или скобку. Вот как вы можете получить доступ к номеру мобильного телефона пользователя:

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

Вы также можете изменять вложенные свойства. Например, если вы хотите изменить настройки темы:

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

Использование типов с вложенными объектами

При работе с TypeScript вы можете определять типы для вложенных объектов, чтобы обеспечить безопасность типов. Вот как вы можете определить тип объекта 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"
    }
};

В этом примере TypeScript тип UserProfile определяет структуру объекта userProfile, гарантируя правильность ввода всех свойств.

Вот еще один пример вложенных объектов в JavaScript.

Давайте рассмотрим более сложный пример, представляющий библиотечную систему, где каждая книга имеет различные детали, включая ее автора, издателя и жанры.
Вложенные объекты можно определить с помощью самого ключевого слова type. TypeScript также может абстрагировать определения типов вложенного объекта в определения типов. Сигнатуры индекса можно использовать, когда вы не уверены в том, сколько свойств будет иметь объект, но уверены в типе свойств объекта

Определение вложенного объекта для библиотечной системы

Вот как можно структурировать вложенный объект для этого сценария:

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

Давайте разберем структуру вложенных объектов.

• Объект библиотеки: представляет всю библиотеку и содержит такие свойства, как имя, местоположение и книги.
• Объект местоположения: содержит вложенные объекты для адреса и координат.
• адрес включает улицу, город, штат и почтовый индекс. Координаты хранят широту и долготу.
• Массив книг: массив, содержащий несколько объектов книг, каждый из которых содержит:
• Название: Название книги.
• Объект автора: вложенный объект, включающий имя и фамилию автора.

-Год публикации: год публикации книги.
-Жанры: набор жанров, к которым принадлежит книга.
-Доступные копии: число, указывающее, сколько копий доступно.

Доступ к данным и манипулирование ими

Вы можете получить доступ к этому вложенному объекту и манипулировать им различными способами. Вот как узнать автора первой книги:

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

Чтобы добавить новую книгу в библиотеку:

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

Использование метода в объекте

Вы также можете использовать методы, определенные в объекте. Например, чтобы получить общее количество книг:

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

Этот пример иллюстрирует, как вложенные объекты можно использовать для создания более комплексной структуры для представления сложных данных, например библиотечной системы. Организовав связанную информацию вместе, вы сможете легко управлять данными и взаимодействовать с ними осмысленным образом.

Еще один вложенный пример

Чтобы улучшить организацию кода и удобство сопровождения, вы можете абстрагировать вложенные объекты на отдельные типы. Этот подход позволяет вам определить тип поставщика провизии отдельно и использовать его в типе поезда. Вот как это можно сделать в 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
};

Определение типа поезда
Далее мы определим тип поезда, который будет использовать тип поставщика общественного питания в качестве свойства поставщика общественного питания.

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

Пример объекта поезда

Теперь мы можем создать экземпляр типа «Поезд», включая сведения о поставщике провизии.

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

Преимущества этого подхода:

• Повторное использование: тип Caterer можно повторно использовать в других частях вашего кода, например, в различных типах транспорта (например, самолетах, автобусах).
• Ясность: разделение типа поставщика общественного питания делает тип поезда более понятным и понятным.
• Удобство обслуживания: если структура Caterer изменится, вам нужно будет обновить ее только в одном месте.

Абстрагируя вложенные объекты в отдельные типы, вы можете улучшить организацию и ясность вашего кода TypeScript. Такой подход обеспечивает лучшую возможность повторного использования и обслуживания, что упрощает управление сложными структурами данных.

Давайте подведем итоги

Вложенные объекты — это мощная функция JavaScript, позволяющая организовывать сложные структуры данных.

Используя вложенные объекты, вы можете создавать более содержательные представления данных, что упрощает понимание и поддержку вашего кода. Кроме того, использование TypeScript может помочь обеспечить безопасность структуры и типов при работе с этими сложными объектами.