유틸리티 타입 - Partial

유틸리티 타입이란 타입에 대한 내용을 변환을 해야할때 도와주는 좋은 타입 문법입니다. 물론 인터페이스,제너릭으로 타입을 변환 할수 있지만 유틸리티 타입 활용하면 더 간결한 코드로 변환을 할수 있습니다. 

Partial

Partial 타입은 타입에 대한 부분 집합을 만족하는 타입을 선안할수가 있습니다. 

interface Cafe {
    cafe_num : number;
    cafe_name : string;
}

type CafePartialType = Partial<Cafe>;
const cafejun: CafePartialType = {}; // 가능
const junseok: CafePartialType = { cafe_num:  12380918}; // 가능
const jun12: CafePartialType = { cafe_num: 789192, cafe_name: 'cafejunCafe'}; // 가능

위 인터페이스에 대한 타입을 Partial을 이용하면 부분 칩합으로 이용할수 있습니다.

Partial API 

Partial 에대한 타입은 아래와 같이 선언이 되어있어 타입의 부분집합으로 활용이 가능한것입니다. 그렇다면 Partial이 어떻게 구현이 되는지 살펴보겠습니다. 

 

Partial -구현 

---

 

예를 들어 현재 유저 프로필에 대한 타입을 아래와 같이 선언이 되어 있다고 가정을 해봅시다. 

interface UsreProfile {
    id: string;  // user 고유 id
    username: string; // user 이름
    age: number; // user 나이 
    photoUrl: string; // user 사진 프로필 URL
}

 

프로필의 업데이트를 관련된 타입을 생성한다고 하였을때 아래와 같이 생성할수 있습니다. 

type UpdateUserProfile = {
  id?: UserProfile["id"]
  username?: UserProfile["username"]
  age?: UserProfile["number"]
  photoUrl?: UserProfile["photoUrl"]
}

위 코드를 조금 축약을 하게 된다면 아래와 같은 타입으로 작성을 할수 있을것입니다. 

type UpdateUserProfile = {
  [p in "id" | "username" | "age" | "photoUrl"]?: UserProfile[p]
}

UserProfile에 대한 인터페이스 참조가 반복이 될경우 타입스크립트에서는 [ in ] 문법으로 반복문을 돌려 타입을 선연할수가 있습니다. 만약 UserProfile 에대한 키값만 가져온다고 했을경우에는 keyof 라는 키워드로 인터페이스 키값을 가져워 아래와 같이 타입을 선언할수가 있습니다. 이런 형식을 맵드 타입이라고 하는데 맵드 타입은 따로 정리를 하겠습니다.

type UserProfileKeys = keyof UserProfile

type UpdateUserProfile = {
  [p in UserProfileKeys]?: UserProfile[p]
}

이부분을 자세히보면 앞에서 보았던 Partial 타입이랑 구조가 동일합니다. 여기에 아래와 같이 subset으로 제네릭을 활용한다면 모든 인터페이스에 대한 타입을 받을수 있는 type alise 가 선언이 됩니다. 

type subset<T> = {
    [p in keyof T]?: T[p];
}


function updateUserPrfileFun (userInfo : subset<UserProfile>) {
 //.. 업데이트 구현 
}

 

 

아직 블로그를 작성하면서 유틸리티 타입에 대한 이해가 부족하지만 잘 활용만 한다면 코드의 가독성을 높히고 확장성있는 타입으로 활용할수 있을것 같습니다.