본문으로 바로가기

유틸리티 타입

category JavaScript/TypeScript 2021. 10. 24. 01:57

유틸리티 타입이란 이미 정의해놓은 타입을 재사용할 때 유용한 타입 문법이다

굳이 사용하지 않아도 기존의 인터페이스, 제네릭으로 충분히 타입 변환이 가능하지만 손이 덜 가고 간결하게 변환할 수 있다

Partial

Partial 타입은 이미 정의한 타입에서 일정 부분만 만족하는 타입을 새로 정의할 수 있다

왜 필요할까

만약 회원가입시 사용자 정보를 객체에 저장한다고 할 때

이름, 나이, 성별, 주소, 이메일, 유저네임, 비밀번호가 필요하다고 생각했고 따라서 아래처럼 정의했다

interface UserInfo {
  name: String;
  age: number;
  sex: String;
  address: String;
  email: String;
  username: String;
  password: String;
}

이렇게 정의된 유저 정보를 다른 API에서 요청할 때 모든 정보가 필요한 것이 아닌 경우

유저의 일부 정보들만 필요로 하는 API가 있다면 아래와 같이 다시 정의할 수도 있다

interface UserInfoOfAPI {
  name?: String;
  age?: number;
  sex?: String;
  address?: String;
  email?: String;
  username?: String;
  password?: String;
}

반복되는 코드가 매우 거슬리고...

또는 원래의 UserInfo 인터페이스에서 속성들을 옵셔널로 정의해서 사용할 수도 있지만..

누구나 꺼림칙할 것이다

이런 경우에 사용할 수 있는 것이 Partial 이다

사용 예

type UserInfoOfAPI = Partial<UserInfo>;

위에 내가 한땀한땀 정의한 인터페이스가 한 줄로 처리된 것을 볼 수 있다

Pick

Partial이 속성들을 옵셔널로 바꿔주는 문법이라면 Pick은 원하는 속성만 골라서 타입을 만들 수 있게 해주는 문법이다

UserInfo에서 이름과 나이만 빼와서 타입을 만들고 싶다면?

type UsernameAge = Pick<UserInfo, 'username'|'age'>;

Omit

Pick이 원하는 속성을 가져와서 타입을 만들었다면 Omit은 그 반대다

원래 존재하던 타입에서 필요 없는 것을 제외하고 타입을 정의할 수 있다

UserInfo에서 민감 정보인 비밀번호와 주소를 빼고 타입을 정의하고자 한다면

type UserInfoPublic = Omit<UserInfo, 'password'|'address'>;

이처럼 정의해주면 된다

'JavaScript > TypeScript' 카테고리의 다른 글

# vs private in Class  (0) 2021.10.27
Mapped Type  (0) 2021.10.25
Generics  (0) 2021.03.12
Function  (0) 2021.03.11
클래스  (0) 2021.03.03