TS - 유틸리티 타입

1. 유틸리티 타입 ?

• TS는 일반적인 타입 변환을 쉽게 하기 위해서 몇 가지 유틸리티 타입을 제공하며, 이러한 유틸리티는 전역으로 사용 가능합니다.
• 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법입니다.
• 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있습니다.

 

2. 유틸리티 타입 사례

• 자주 사용하는 유틸리티 타입들을 써보겠습니다.

🤔 Pick<T,K> (픽)

• 픽(Pick) 타입은 특정 타입에서 몇 개의 속성을 선택(pick)하여 타입을 정의할 수 있습니다.
• T에서 프로퍼티 K의 집합을 선택해 타입을 구성합니다.

그렇다면 어떤 코드를 어떻게 바꿀 수 있는지 확인해보겠습니다~

interface I_1 {
    id: number;
    name: string;
    price: number;
    brand: string;
    stock: number;
}
// 1. 상품 목록을 받아오기 위한 API 함수
function F_1(): Promise<I_1[]> {
    // ~
}

interface I_2 {
    id: number;
    name: string;
    price: number;
}
// 2. 하나의 아이템 클릭 시 상세 정보를 화면에 뿌리기 위한 함수
function F_2(shoppingItem: I_2) {
    // ~
}

위와 같이 상품 목록을 받아오는 함수와, 상품의 상세 정보를 화면에 보여주는 함수가 있을 때, 인터페이스 I_1, I_2에 중복된 코드들이 생겨 불필요 코드들이 생깁니다. 유틸리티 사용의 필요성이 느껴집니다!

function I_3(shoppingItem: Pick<I_1, 'id' | 'name' | 'price'>) {

}

I_3({ id: 10, name: 'name', price: 1000 });

/* Pick<I_1, 'id' | 'name' | 'price'>
   I_1 인터페이스에서 id, name, price 를 쓰겠다. 라는 의미
*/

이처럼 Pick 유틸리티를 사용하면 불필요 코드를 줄일 수 있습니다.

 

🤔 Partial<T> (파셜)

• T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다.
• 이 유틸리티는 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다.

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

/* productItem은 I_1 이 가지는 모든 타입들의 부분집합이 가능
    
    interface I_1 {
        id?: number;
        name?: string;
        price?: number;
        brand?: string;
        stock?: number;
    }
    와 같은 타입이 선언되었다고 보면 됨.
*/
function F_1(productItem: Partial<I_1>) {

}

// 아래 케이스 모두 정상 동작함.
F_1({ id: 10 });
F_1({ name: 'name' });
F_1({ price: 1000 });
F_1({ name: 'name', price: 1000 });
F_1({ id: 10, price: 1000, brand: 'brand', stock: 10000 });

 

🤔 Omit<T,K> (오밋)

• T에서 모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성합니다.

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

/* productItem은 I_1 이 가지는 name 컬럼 제외한 타입이 가능

   interface I_1 {
    id: number;    
    price: number;
   }
   와 같다고 보면 됨.
 */
function F_1(productItem: Omit<I_1, 'name'>) {

}
F_1({ id: 10, price: 1000 });​

 

 

유틸리티 타입을 잘 활용하면 불필요한 코드를 줄일 수 있다는 장점이 있다~ 나도 잘 활용해봐야겠다~

 

 

🔗 참고한 글 (더 많은 유틸리티 타입이 궁금하시면 아래 링크에서 검색 가능합니다!)

TypeScript 한글 문서