유틸리티 타입
타입스크립트의 유틸리티 타입은 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
'Web > HTML, CSS, JavaScript' 카테고리의 다른 글
Javascript - Ajax 여러개 결과 기다렸다가 특정 함수를 실행하는 방법 비교! (0) | 2022.05.05 |
---|---|
Javascript - Optional chaining [ES2020] (Cannot read properties of undefined를 해결하기 위한 다양한 방법!) (0) | 2022.04.26 |
Javascript - DB 초성으로 검색하기! (+ Performance, 함수형, ...) (1) | 2022.03.26 |
Javascript - Null 병합 연산자 (null, undefined 검사 후 삼항 연산자 사용 개선) (0) | 2022.02.15 |
JavaScript - 객체(Object) (0) | 2020.10.28 |