내일배움캠프 TIL (230130): Object 메서드의 함수 시그니처 알아보기

객체를 배열로 변환할 때 사용되는 Object 메서드 중 3대장이 있다.

• Object.keys(obj): 객체의 키를 배열로 반환
• Object.values(obj): 객체의 값을 배열로 반환
• Object.entries(obj): 객체의 키와 값을 쌍으로 반환

그렇다면 Object 메서드를 타입스크립트에서 사용할 때 유의할 점을 알아보자.

다음과 같은 enum과 인터페이스가 있다.

enum Status {
  Initiated = "Initiated",
  Pending = "Pending",
  Shipped = "Shipped",
  Delivered = "Delivered",
}
  
interface Order {
  buyer: string;
  orderStatus: Status;
}

Order 인터페이스에 맞는 객체를 반환하기 위해 다음과 같은 함수를 작성한다. 과연 제대로 컴파일 될까?

const orders: Order[] = Object.keys(Status).map((status, index) => {
  return {
    buyer: `buyer #${index}`,
    orderStatus: status,
  };
});

다음과 같은 에러가 발생한다.

Type 'string' is not assignable to type 'Status'.

에러가 발생하는 이유는 Object.keys() 메서드를 사용했기 때문이다.
Object.keys() 메서드의 시그니처를 살펴보자. (ctrl + 클릭)

keys(o: object): string[];

타입이 string[]으로 지정되어 있는 것을 볼 수 있다.

따라서 Object.keys(Status)를 통해 map으로 전달된 인자 status는 enum이 아니라 string으로 변환이 된다.

Object.values()로 메서드를 바꿔주면 해결된다.

values<T>(o: { [s: string]: T } | ArrayLike<T>): T[];

Object.values()의 함수 시그니처를 보면 제네릭 타입으로 설정되어 있기 떄문에 enum을 그대로 사용할 수 있다.