객체는 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 개체에는 사용자 이름, 나이, 연락처와 같은 속성이 있습니다.
연락처 속성 자체는 이메일과 전화를 포함하는 개체입니다.
전화 속성은 집과 휴대폰 번호가 포함된 또 다른 중첩 개체입니다.

중첩된 개체 속성에 액세스

중첩된 개체 내의 속성에 액세스하려면 점 표기법이나 대괄호 표기법을 사용할 수 있습니다. 사용자의 휴대폰 번호에 액세스하는 방법은 다음과 같습니다.

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

이 예에서는 중첩된 개체를 사용하여 도서관 시스템과 같은 복잡한 데이터를 나타내는 보다 포괄적인 구조를 만드는 방법을 보여줍니다. 관련 정보를 함께 정리하면 의미 있는 방식으로 데이터를 쉽게 관리하고 상호작용할 수 있습니다.

또 다른 중첩된 예

코드 구성 및 유지 관리성을 향상시키기 위해 중첩된 개체를 별도의 유형으로 추상화할 수 있습니다. 이 접근 방식을 사용하면 Caterer 유형을 별도로 정의하고 이를 Train 유형 내에서 사용할 수 있습니다. 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
};

열차 유형 정의
다음으로, 케이터링 속성에 대해 Caterer 유형을 사용하는 Train 유형을 정의합니다.

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

열차 객체의 예

이제 Caterer 세부정보를 포함하여 Train 유형의 인스턴스를 생성할 수 있습니다.

// 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 유형을 분리하면 Train 유형이 더 깔끔하고 이해하기 쉬워집니다.
• 유지관리성: Caterer의 구조가 변경되면 한 곳에서 업데이트하기만 하면 됩니다.

중첩된 개체를 별도의 유형으로 추상화하면 TypeScript 코드의 구성과 명확성을 향상할 수 있습니다. 이 접근 방식을 사용하면 재사용성과 유지 관리성이 향상되어 복잡한 데이터 구조를 더 쉽게 관리할 수 있습니다.

요약해보자

중첩 개체는 복잡한 데이터 구조를 구성할 수 있는 JavaScript의 강력한 기능입니다.

중첩된 개체를 사용하면 보다 의미 있는 데이터 표현을 생성하여 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다. 또한 TypeScript를 사용하면 이러한 복잡한 객체를 처리할 때 구조 및 유형 안전성을 강화하는 데 도움이 될 수 있습니다.