유틸리티 타입 1

이번에는 TypeScript에 내장된 유틸리티 타입을 알아보자.

오늘 볼 유틸리티 타입은 Partial, Required, Readonly 세 가지로 전부 맵드 타입 기반으로 만들어진 타입이다.

Partial

특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입

 

전체적인 예시를 게시판으로 들어보자.

우선, 다음과 같은 게시글 객체를 만들었다.

게시글 객체

 

그런데 우리는 이 게시판에 임시 저장이라는 기능을 만들고자 한다.

그리고 임시 저장 기능을 만들자니 내용이나 태그가 없는 상태로 글을 저장해야 하는 경우가 발생한다. 어쩌면 제목이 없는 상태로 임시 저장이 필요할 수도 있다.

이때, 임시 저장을 위한 타입을 새롭게 생성하지 않고 다음과 같이 유틸리티 타입을 적용해서 해결할 수 있다.

Partial 타입

 

Partial 타입을 맵드 타입과 인덱스드 엑세스를 활용하여 우리가 직접 만들 수도 있다. 아래는 직접 Partial 타입을 구현한 코드이다. 생각보다 굉장히 간단하다.

Partial 2

Required

특정 객체 타입의 모든 프로퍼티를 필수 프로퍼티로 바꿔주는 타입

 

이번에는 Partial 타입과 반대로 선택적 프로퍼티를 필수 프로퍼티로 바꿔주는 타입이다.

위에 설정한 게시판의 썸네일이 선택적 프로퍼티로 되어있는데, 유저 입장에서는 썸네일을 선택사항으로 두지만 백엔드에서 썸네일을 필수로 지정했다고 가정해보자.

이때 객체를 더 엄격하게 관리하기 위해 프론트엔드에서 백엔드로 게시글 데이터를 보낼 때는 모든 프로퍼티를 필수적인 프로퍼티로 검사하려 한다. 바로 이런 경우에 Required 타입을 사용하면 된다.

아래와 같이 Required 타입에서 프로퍼티를 누락할 경우 컴파일 에러가 발생한다.

Required 1

 

Required 타입 역시 맵드 타입과 인덱스드 엑세스를 활용해서 구현할 수 있다.

Required 2

 

여기서 -? 문법이 등장하는데 선택적 프로퍼티를 필수로 지정해주는 역할을 한다.

Readonly

특정 객체 타입에서 모든 프로퍼티를 읽기 전용 프로퍼티로 만들어주는 타입

 

마지막으로 읽기 전용으로 만들어주는 Readonly 타입이다.

수정이 불가능한 보호된 게시글을 만드려고 한다. 그러려면 읽기 전용 타입이 필요한데 유틸리티 타입에서 이를 지원한다.

Readonly 1

 

Readonly 타입 역시 쉽게 구현할 수 있다.

Readonly 2

 

앞으로 한 번 더 여러 유틸리티 타입에 대해 정리하려 한다. 내장되어 있는 타입들이므로 다들 유용하게 사용하기 바란다.

참고자료

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

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