중첩된 오브젝트 (Nested Object)
- 객체 안에 또 다른 객체가 있는 것을 중첩된 객체라고 한다.
- 중첩된 객체에서 유의해야 할 것은 중첩된 내부 객체를 잘 나누어줘야 나중에 디버깅할 때 훨씬 쉽고 재사용이 가능하다는 것이다.
// 직접 Nested 정의하기
type Person = {
address: {
postalCode: number;
detail: string;
};
name: {
firstName: string;
lastName: string;
};
};
const person: Person = {
address: {
postalCode: 111,
detail: "서울특별시",
},
name: {
firstName: "jake",
lastName: "seo",
},
};
// 에러 내용 읽기가 꽤 어렵다.
// Nested 가 많이 될수록 더 어려워진다.
const personError: Person = {
address: {
postalCode: 111,
},
name: {
firstName: "jake",
lastName: "seo",
},
};
- 칭할 이름이 없으니 현재는 but required in type '{ postalCode: number; ...}' 와 같이 표기된다.
type Address = {
postalCode: number;
detail: string;
};
type Name = {
lastName: string;
firstName: string;
};
type Person2 = {
address: Address;
name: Name;
};
// 에러 내용 읽기가 한결 낫다.
// 어떤 타입을 봐야 하는지를 알려주기 때문에 문제가 더 잘게 쪼개진다.
// Nested 가 많이 될수록 이 이점이 크다.
const personError2: Person2 = {
address: {
postalCode: 111,
},
name: {
lastName: "seo",
firstName: "jake",
},
};
- 에러 메세지를 보고
Address
타입에서 뭔가 잘못됐다는 것을 쉽게 유추할 수 있다. Address
타입을 보고 뭐가 문제일까 생각해보면 금방 문제가 해결될 것이다.
- 당연히 인터페이스도 동일하다.
interface IAddress {
postalCode: number;
detail: string;
}
interface IName {
lastName: string;
firstName: string;
}
interface IPerson2 {
address: Address;
name: Name;
}
// 당연히 인터페이스도 동일하다.
const personError3: IPerson2 = {
address: {
postalCode: 111,
},
name: {
lastName: "seo",
firstName: "jake",
},
};
반응형
'Typescript' 카테고리의 다른 글
TS026. 타입스크립트 오브젝트의 Key-Value Mapping 알아보기 (0) | 2023.12.31 |
---|---|
TS025. 타입스크립트 옵셔널 vs Type | Undefined 의 차이 (0) | 2023.12.30 |
TS023. 타입스크립트 객체 초과 프로퍼티 검사 정리 (0) | 2023.12.30 |
TS022. 타입스크립트 튜플 정리 (0) | 2023.12.30 |
TS021. 타입스크립트 다차원 배열 (0) | 2023.12.30 |