TS024. 타입스크립트 중첩된 오브젝트 사용 시 주의점 (Nested Object)

중첩된 오브젝트 (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",
  },
};