반응형
객체 타입의 타입 연산자
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 객체의 필드를 찾는 문법과 키인 문법은 의도적으로 비슷하게 만들어졌습니다.
다만 키인으로 프로퍼티 타입을 찾을 때 점이 아니라 대괄호 표기법을 사용한다는 점만 주의합시다:)
반응형
'👶 TypeScript' 카테고리의 다른 글
Record 타입 (0) | 2023.01.20 |
---|---|
객체 타입의 타입 연산자 - keyof 연산자 (0) | 2023.01.19 |
철저 검사(Exhaustiveness Checking)라 불리는 종합성(Totality) (0) | 2023.01.19 |
정제 - 차별된 유니온 타입 (0) | 2023.01.19 |
정제 (0) | 2023.01.19 |