유틸리티 타입 - Pick, Omit, Partial

유틸리티 타입 - Pick

유틸리티 타입(Pick)을 사용하는 예제를 알아보자

서버로부터 상품목록을 API를 통해 가져와 뿌리기

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

// 상품 목록을 받아오기 위한 API함수
function fetchProducts(): Promise<Product[]> {

}

이것을 코드로 나타내면 다음과 같을 것이다.
상품을 인터페이스로 나타내어 서버에서 받아올 데이터 타입들을 일치시킨다.
그리고 목록을 받아오니 배열로 받아주면 될 것이다.

상세정보 보기

만약 목록 중 상세보기를 클릭했을 때에는 어떻게 될 것인가 생각해봐야 한다.
상세보기 했을 때에는 목록에 필요없는 것, 또는 필요한 내용이 추가될 수도 있다.
즉 Product로 정의한 인터페이스가 변동될 수 있다는 의미이다.

객체 리터럴로 받는 방법1

function displayProductDetail(shoppingItem: {id : number; name:string; price: number}) {

}

객체 리터럴로 받을 수 있지만 중복되는 코드가 발생한다.

상세정보 인터페이스 정의하기

interface ProductDetail{
  id : number;
  name:string;
  price:number;
}


// 중복된 코드 생성된다.
function displayProductDetail(shoppingItem: ProductDetail) {

}

중복되는 코드가 발생한다.

Pick 유틸리티 사용하기

type shoppingItem =  Pick<Product, 'id' | 'name' | 'price'>
// 중복된 코드 생성된다.
function displayProductDetail(shoppingItem) {

}

유틸리티 타입 - Omit

유틸리티 타입(Omit)은 Pick과 반대이다.

interface AddressBook {
  name: string;
  phone: number;
  address: string;
  company: string;
}

const phoneBook: Omit<AddressBook, 'address'> = {
  name: '재택근무',
  phone: 123,
  company: '내방'
}

Omit은 Pick과는 반대로 제외목록을 적어준다.

유틸리티 타입 - Partial

만약 상품정보를 업데이트 한다면 어떻게 해야할까?
우리는 특정 상품정보만 업데이트할 것이다.

기존 있던 Product

interface Product {
  id : number;
  name: string;
  price: number;
  brand: string;
  stock: number;
}
function updateProductItem(ProductItem: Product){

}

이렇게 하게되면 Product 인터페이스에 정의된 모든 내용이 전부 들어가야한다. 하지만 우리는 특정 정보만 업데이트할 것이므로 이것은 좋은 방법이 아니다.

옵셔널로 인터페이스 새로 정의하기

interface UpdateProduct {
  id? : number;
  name?: string;
  price?: number;
  brand?: string;
  stock?: number;
}
function updateProductItem(ProductItem: UpdateProduct){

}

옵셔널을 사용하게되면 사용해도 안해도 된다. 업데이트할 특정정보만 넣을 수 있다는 것이다. 하지만 중복된 코드가 발생한다는 문제가 있다.

Partial로 중복된 코드 제거하기

type updateProduct = Partial<Product>

function updateProductItem(ProductItem: Partial<Product>){

}

위에서 옵셔널로 새롭게 정의한 인터페이스와 같은 역할을 한다.
Partial 유틸리티를 사용하게 되면 안에 있는 타입들이 옵셔널로 된다.