타입스크립트의 유틸리티 타입인 Omit과 Pick를 사용해서 데이터 목록 조회 시, 필요한 파라미터 타입을 만들어봤다.
전에 작성했던 Omit에 대해 공부한 글과 Pick에 대해 공부한 글를 활용해서 데이터 목록 조회 시, 필요한 파라미터를 생성해보았다.
다시 한번 간단하게 Pick과 Omit를 사용하는 방법을 소개하자면.
- 오늘의 예제코드
interface Person {
name: string
age: number
address: string
}
Pick
특정 타입에서 원하는 타입을 선택하여 선택한 타입으로 새로운 타입을 만들 수 있다.
Pick <가져올 타입, "특정 타입 키(복수 가능)">
type PersonNameAndAge = Pick<Person, 'name' | 'age'>
const personInfo: PersonNameAndAge = {
name: 'John',
age: 30,
}
Omit
특정 타입에서 원하는 타입을 빼고 나머지 타입을 가져올 수 있다.
Omit <가져올 타입, "특정 타입 키(복수 가능)">
type PersonWithoutAddress = Omit<Person, 'address'>
const personWithoutAddress: PersonWithoutAddress = {
name: 'Alice',
age: 25,
}
공통 목록 조회 타입 생성하기
목록조회 시, 자주 사용하는 값들의 타입인 listParamsType 를 생성했다.
export interface listParamsType {
pg: number
pgSz: number
sordFld: 'rgstYmd' | 'modYmd'
sordMetd: 'DESC' | 'ASC'
schTp: number
schLangTp: '1' | '2'
}
listParamsType 만 사용해서 목록을 조회할 수 있으면 좋겠지만, 검색어가 필요하거나 키워드를 선택하여 조회할 수 있는 기능이 추가된다면 저대로 사용하기에 어려움이 생겨 새로운 타입을 만들고 했었다.
Pick과 Omit를 활용해서 하나의 공통 타입을 바라보게 하여 유지보수가 용이할 수 있게 해보자.
상황 1
블로그 목록조회 시, listParamsType의 schLangTp(언어코드)는 필요하지않고 schTxt(검색어)값이 필요하다.
상황 1에서는 기존 타입에서 하나의 타입이 제외되기에 Omit이 적합해보인다. 바로 적용해보자.
interface blogListParamsType extends Omit<listParamsType, 'schLangTp'> {
schTxt: string
}
확장에 용이한 interface와 원하는 값을 생략할 수 있는 Omit를 사용해서 schLangTp은 제외하고 schTxt는 타입에 추가했다.
const blogListParams: blogListParamsType = {
pg: 1,
pgSz: 10,
sordFld: 'rgstYmd',
sordMetd: 'DESC',
schTp: 1,
schTxt: '',
}
상황 2
banner 목록조회 시, listParamsType의 pg와 pgSz를 제외한 값은 필요하지 않다.
interface bannerListParamsType extends Pick<listParamsType, 'pg' | 'pgSz'> {}
Pick를 사용해서 listParamsType에서 pg와 pgSz만 사용할 수 있다.
const bannerListParams: bannerListParamsType = {
pg: 1,
pgSz: 10,
}
Pick은 기존에 사용하던 타입의 수가 많을 때, Omit에 비해 용이하지 않다.
Omit은 기존 타입에서 제외할 타입을 빼고 전부 다 사용하지만,
Pick은 사용할 타입을 모두 선택해줘야하기 때문이다.
상황 3
post 목록조회 시, listParamsType에 schTpDtl(구분상세), schFld(분야), schTxt(검색어) 값이 추가로 필요하다.
interface postListParamsType extends listParamsType {
schTpDtl: number
schTxt: string
schFld: string
}
제외나 선택할 필요 없이 listParamsType의 모든 값이 필요하고 추가로 다른 타입 값이 필요한 상황이므로, interface의 extends만을 사용했다.
const postListParams: postListParamsType = {
pg: 1,
pgSz: 10,
sordFld: 'rgstYmd',
sordMetd: 'DESC',
schTp: 1,
schTpDtl: 1,
schTxt: '',
schFld: '',
}
정리
기존에는 별 생각없이 목록 조회 API마다 새로운 타입을 생성하여 사용했었는데, 공통된 하나의 타입에서 파생하여 API마다 원하는 타입대로 변경하니 키 값이 변경되거나 수정해야 할 일이 생겼을 때 유지보수하기에도 더 편하고 일일이 타입을 입력하지 않아도 된다는 점에서 좋았던 것 같다.
Pick은 여러 조건을 넘겨서 데이터를 호출해야하는 목록조회에서는 적합하지 않다고 생각이 들었다. 따라서 interface와 Omit를 사용하여 특정 값을 제외하고 불러와 추가하거나 interface의 extends를 사용하여 값을 추가해주는 형태로 사용했다.