객체 타입의 타입 연산자 - 키인 연산자

객체 타입의 타입 연산자

TypeScript는 유니온(|)과 인터섹션(&) 두 연산자 이외에 다른 타입 연산자도 제공합니다.

 

형태 관련 연산을 수행하는 데 도움을 주는 다양한 연산자를 알아보겠습니다.

키인 연산자

선택한 소셜 미디어 API에서 받은 GraphQL API 응답을 모델링하는 복잡한 중첩 타입이 있다고 가정해 보겠습니다.

type APIResponse = {
    user: {
        userId: string
        friendList: {
            count: number
            friends: {
                firstName: string
                lastName: string
            }
        }
    }
}

이 API에서 응답을 받아와 보여줘야 합니다.

type APIResponse = {
    user: {
        userId: string
        friendList: {
            count: number
            friends: {
                firstName: string
                lastName: string
            }
        }
    }
}

function getAPIResponse(): Promise<APIResponse>{
    // 블라 블라
}

function renderFriendList(friendList: unknown){
    // 블라 블라
}

let response = await getAPIResponse()
renderFriendList(response.user.friendList)

여기서 friendList는 어떤 타입이어야 할까요? (현재는 unknown 으로 처리했습니다.)

 

다음처럼 friendList의 타입을 따로 정의하고, 이를 반영하여 최상위 수준의 APIResponse를 다시 구현하는 방법도 있습니다.

type FriendList = {
    count: number
    friends: {
        firstName: string
        lastName: string
    }[]
}

type APIResponse = {
  user: {
    userId: string;
    friendList: FriendList
  };
};

function renderFriendList(friendList: FriendList) {
  // 블라 블라
}

function getAPIResponse(): Promise<APIResponse> {
  // 블라 블라
}

let response = await getAPIResponse();
renderFriendList(response.user.friendList);

하지만 이 방식에선 각 최상위 타입에 쓰이는 이름들을 하나하나 다 만들어야 하는데, 매번 이렇게 하기 귀찮습니다.

 

대신 응답 타입에 키인(key in)하는 방법이 있습니다.

type APIResponse = {
  user: {
    userId: string;
    friendList: {
      count: number;
      friends: {
        firstName: string;
        lastName: string;
      };
    };
  };
};

type FriendList = APIResponse['user']['friendList']

function renderFriendList(friendList: FriendList) {
  // 블라 블라
}

모든 형태(객체, 클래스 생성자, 클래스 인스턴스)와 배열에 키인 할 수 있습니다.

 

예를 들어 다음처럼 친구 한 명의 타입도 얻을 수 있습니다.

type Friend = FriendList['friends'][number]

number가 배열 타입에 키인을 적용하는 핵심입니다.

 

튜플에선 0, 1 또는 키인 하려는 인덱스를 가리키는 숫자 리터럴 타입을 사용할 수 있습니다.

 

일반 JavaScript 객체의 필드를 찾는 문법과 키인 문법은 의도적으로 비슷하게 만들어졌습니다.

 

다만 키인으로 프로퍼티 타입을 찾을 때 점이 아니라 대괄호 표기법을 사용한다는 점만 주의합시다:)