유틸리티 타입 2

이번에는 또 다른 유틸리티 타입인 Pick, Omit, Record에 대해 알아보자.

Pick

객체 타입으로부터 특정 프로퍼티만 딱 골라내는 타입

 

초창기 게시판을 만들 때 게시판 객체를 다음과 같이 설정했다고 가정하자.

초창기 게시판

 

근데 서비스를 제공하다보니 게시판에 변화가 생기면서 게시판 객체가 다음과 같이 업그레이드 되었다.

최신 게시판

 

그런데 게시판 객체를 업그레이드 하고보니 다음과 같이 옛날에 작성된 글에는 태그가 없는 상태가 발견됐다.

옛날 글

 

이럴 경우 옛날 게시판과 현재 게시판 객체 두 가지를 모두 만드는 것이 아니라 Pick이라는 유틸리티 타입을 적용하면 편하다.

Pick 1

 

Pick 타입 역시 맵드 타입과 인덱스드 엑세스를 활용하여 쉽게 구현할 수 있다.

Pick 2

Omit

객체 타입으로부터 특정 프로퍼티를 제거하는 타입

 

Pick이 특정 프로퍼티를 골라냈다면 Omit은 특정 프로퍼티만 제거하는 타입이다. 방금 작성한 legacyPost를 Omit 타입을 이용해 다음과 같이 작성할 수도 있다.

Omit 1

 

또한, Omit 자체가 Pick으로부터 파생된 타입으로 구현도 Pick을 이용해 구현한다.

Omit 2

 

즉, 특정 객체에서 골라내는 프로퍼티가 적을 경우 Pick을 이용하고 골라낼 프로퍼티가 더 많은 경우 Omit을 이용하는 편이 개발에 더 용이하다.

Record

객체를 만들어주는 타입

 

다소 정의가 좀 애매한 느낌이 들수도 있는데 Record는 말 그대로 특정한 객체를 만들어주는 타입이다. 좀 더 정확히 말하면 특정한 객체 타입을 만들어주는 타입이다.

다음과 같이 브라우저 화면 크기에 따라 썸네일 주소가 바뀌게 객체 타입을 지정했다고 하자.

일반 객체 타입

 

굉장히 비효율적으로 작성된 것을 볼 수 있다. 여기에 화면 사이즈가 더 세분화될 경우 url: string이라는 동일한 코드가 계속해서 반복되게 된다.

이를 Record 타입을 이용해 다음과 같이 더 간결하게 표현할 수 있다.

Record 1

 

코드에 작성된 것 처럼 각각 large, medium, small을 키로 { url: string }을 값으로 갖는 객체 타입을 생성해준다.

Record를 이용할 경우 화면 사이즈가 더 세분화되어도 단어 하나씩만 추가되는 수준으로 코드의 변경이 마무리된다.

 

Record 타입 역시 맵드 타입을 기반으로 구현할 수 있다.

Record 2

 

보면 보기 드물게 any 타입이 사용된 것을 볼 수 있는데, Record는 다른 타입들처럼 특정 타입에서 골라내거나 빼는 것이 아닌 새로운 객체 타입을 만드는 성질이므로 V를 값으로 갖기 위한 key 값에는 정말 어떠한 객체가 와도 된다.

따라서, K 값이 any 타입의 key를 상속하게끔 정의한다.

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런