[10.19] 타입스크립트 - 유틸리티(Partial)

Partial

• Partial
• Partial 의 동작원리

Partial

Partial는 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있는 것으로,
필요한 정보만 보는 Pick 과의 차이점이라면 Partial는 상품의 정보를 업데이트(put 같은 역할) 를 할때 쓰인다고 볼 수 있다.

//기존 Product 인터페이스
interface Product {
  id : number;
  name : string;
  price : number;
  brand : string;
  stock : number;
}

interface UpdateProduct {
  id? : number;
  name? : string;
  price? : number;
  brand? : string;
  stock? : number;
}

Partial 을 쓰지 않더라도 ? 로 옵셔널처리를 해서 선택적으로 적용이 가능했다.
하지만 Partial 을 쓴다면 기존에 있는 Product 라는 인터페이스를 재활용할 수 있어 중복되는 코드를 막을 수 있고 더 간결하게 표현이 가능하다.

type UpdateProduct = Partial<Product>
function updateProductItem(productItem:Partial<Product>){
}

Partial 의 동작원리

비주얼스튜디오에서 제공하는 타입스크립트 Partial 의 형태를 보면 다음과 같다.
(command 또는 alt 를 누른 채 Partial 클릭하면 확인가능 )

UserProfile 이라는 인터페이스와 수정할 UserProfileUpdate 라는 인터페이스
두개를 예시로 들면서 위의 형태를 따라 partial의 동작원리를 분석해본다면,

1. 기본형태

interface UserProfile {
  username : string,
  email : string,
  profilePhotoUrl : string
}
interface UserProfileUpdate {
  username? : string,
  email? : string,
  profilePhotoUrl? : string
}

2. UserProfile 그대로 인덱스로 접근하여 위에서 만든 UserProfileUpdate 인터페이스를 타입별칭으로 바꿔준다. 즉, 위와 동일한 인터페이스가 아닌, 타입별칭 생성한것.

type UserProfileUpdate = {
  username? : UserProfile['username'],
  email? : UserProfile['email'],
  profilePhotoUrl? : UserProfile['profilePhotoUrl']
}

3. 배열안의 in 오퍼레이터를 사용해서 반복문을 돌리는 개념으로, 위와 동일한 값을 더 간단하게 표현 할 수 있다. UserProfileUpdate 각 키를 for in 문 돌리듯, 반복하되, 옵셔널 조건인 ? 을 붙여주면 된다.
   이를 Mapped type 이라고 한다.
   (다음 블로깅 때 더 자세히 다뤄보도록 하겠다.)

type UserProfileUpdate = {
  [ p in 'username' | 'email' | 'profilePhotoUrl']? : UserProfile[p]
}

위와 동일한 조건을 keyof 를 통해 더 짧게 줄일 수 있다.
아직 완전한 Partial 타입은 아니고 Partial 타입을 줄여나가는 방식 중 하나일 뿐이다.

type UserProfileKeys = keyof UserProfile

4.위에서 사용된 keyof를 대입해주면 타입스크립트에서 설명하는 Partial 의 형태와 점점 비슷해짐을 볼 수 있다.

type UserProfileUpdate = {
  [p in keyof UserProfile]? : UserProfile[p]
}

5. 여기에 제네릭 타입인 < T >를 넣어주면 완전한 Partial 의 형태를 띄게 된다.

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