Web/HTML, CSS, JavaScript

TypeScript - 유틸리티 타입을 사용하는 이유 (Partial, Pick, Omit) [DTO를 우아하게 분리]

JaeHoney 2022. 2. 2. 22:27
반응형

유틸리티 타입

타입스크립트의 유틸리티 타입은 interface를 더 우아하게 사용할 수 있도록 도와줍니다. 유틸리티 타입도 종류가 현 기준 20가지 가까이 되는데, 그 중 많이 사용하는 3가지 (Partial, Pick, Omit)을 살펴보겠습니다.

 

Partial

Partial 타입은 모든 properties를 optional로 바꿀 수 있습니다. 가령, 아래와 같은 Product interface를 사용하고 있다고 가정합니다.

interface Product {
    id: number;
    seller: number;
    category: number;
    name: string;
    price: string;
}

여기서 Product를 검색할 수 있는 기능을 추가하려 합니다. 그러면, 아래와 같이 Optional properties를 가진 type을 새로 정의해야합니다.

 

이 때 Partial 타입을 사용하면 더 가독성이나 유지보수성이 뛰어난 코드로 처리할 수 있습니다.

/*
type SearchProduct {
    id?: number;
    seller?: number;
    category?: number;
    name?: string;
    price?: string;
}
*/

type SearchProduct = Partial<Product>;

 

Pick

Pick타입은 짐작가시겠지만, 원하는 properties를 선택해서 새롭게 타입을 정의할 수 있습니다.

interface Product {
    id: number;
    seller: number;
    category: number;
    name: string;
    price: string;
}

/*
interface ProductInfo {
    id: number;
    name: string;
    price: string;
}
*/

type ProductInfo = Pick<Product, "id", "name", "price">

 

Omit

Omit은 특정 properties를 제외한 타입을 새롭게 정의할 수 있습니다.

interface Product {
    id: number;
    seller: number;
    category: number;
    name: string;
    price: string;
    isDel: boolean;
}

/*
interface Product {
    id: number;
    seller: number;
    category: number;
    name: string;
    price: string;
}
*/

type FindProductDTO = Omit<Product, "isDel">;

 

마무리

저는 유틸리티 타입을 DTO에 많이 사용합니다.

 

유틸리티 타입을 사용하면 타입 정의를 반복하면서 코드가 중복되는 것을 막음으로써 가독성이나 유지보수성을 잡을 수 있습니다.

 

TypeScript + Express는 DTO를 API 스펙마다 정의해야 했는데, 유틸리티 타입을 사용해서 해소할 수 있어서 좋은 것 같아요!

 

그리고, 테스트 코드 작성에도, 새로운 Type이 필요해져서,  &를 사용해서 interface를 결합하거나 any타입을 임시로 사용한 경우가 많은데, 그런 것을 OOP스럽게 해결할 수 있어서 좋은 것 같습니다.

 

 

감사합니다.

 

공식 레퍼런스 - https://www.typescriptlang.org/ko/docs/handbook/utility-types.html

 

 

 

 

반응형