아이템 23 - 한꺼번에 객체 생성하기

변수에 객체를 할당하는 방법

자바스크립트에서는 객체를 생성할 때 다음과 같이 생성할 수 있습니다.

const pt = {};
pt.x = 3;
pt.y = 4;

하지만 위의 예제를 타입스크립트에서 사용하면 다음과 같은 오류가 발생합니다.

const pt = {};
pt.x = 3;
// ~ Property 'x' does not exist on type '{}'
pt.y = 4;
// ~ Property 'y' does not exist on type '{}'

따라서 타입스크립트에서는 객체를 생성할 때, 속성을 하나씩 추가하기보다는 여러 속성을 포함해서 한꺼번에 생성하는 것이 좋습니다.

타입스트립트에서 객체 생성 방법

• 타입 선언 활용 (type 키워드 or 인터페이스)

  interface Point { x: number; y: number; }
  const pt: Point = {
    x: 3,
    y: 4,
  };  // OK

• 타입 추론 활용

  const pt = {
    x: 3,
    y: 4,
  };

• 타입 단언문 활용

  interface Point { x: number; y: number; }
  const pt = {} as Point;
  pt.x = 3;
  pt.y = 4;  // OK

타입스크립트에서 여러 객체를 합치는 방법

작은 객체들을 조합해서 큰 객체를 만들어야 하는 경우 객체 전개 연산자(...)을 사용하면 됩니다.

interface Point { x: number; y: number; }
const pt = { x: 3, y: 4 };
const id = { name: 'Pythagoras' };
const namedPoint = { ...pt, ...id };
namedPoint.name;  // OK, type is string

// 객체 전개 연산자를 사용하면 필드 단위로 객체를 생성할 수도 있습니다.
const pt0 = {};
const pt1 = { ...pt0, x: 3 };
const pt: Point = { ...pt1, y: 4 };  // OK

객체에 조건부 속성을 추가하려면, 속성을 추가하지 않는 null 또는 {}으로 객체 전개를 사용하면 됩니다.

// 조건부 속성 추가하는 방법
declare let hasMiddle: boolean;
const firstLast = { first: 'Harry', last: 'Truman' };
const president = { ...firstLast, ...(hasMiddle ? { middle: 'S' } : {}) };

// 한꺼번에 여러 속성을 추가하는 경우
declare let hasDates: boolean;
const nameTitle = { name: 'Khufu', title: 'Pharaoh' };
const pharaoh = {
  ...nameTitle,
  ...(hasDates ? { start: -2589, end: -2566 } : {})
};
// pharaoh의 타입은 { start: number; end: number; name: string; title: string; } | { name: string; title: string; } 가 된다.

// 만약 { start?: number; end?: number; name: string; title: string; } 타입으로 만들고 싶다면 헬퍼 함수를 사용하면 된다.
function addOptional<T extends object, U extends object>(
    a: T, b: U | null
): T & Partial<U> {
  return { ...a, ...b };
}
const optionalPharaoh = addOptional(
    namedTitle,
  hasDates ? { start: -2589, end: -2566 } : null
);
optionalPharaoh.start // OK, type is number | undefined