맵드 타입

아래 사진과 같이 간단하게 유저 타입을 정의하고 유저 정보를 받아오는 함수와 유저 정보를 수정하는 함수를 만들었다고 가정하자.

초기 설정

1. 유저 수정

우선, 유저를 수정하는 함수부터 살펴보자. updateUser 함수에는 매개변수 user가 필요한데, 이때 user의 타입은 User이다. 만약, 이렇게 설정할 경우 우리는 유저 정보를 수정하기 위해 다음과 같은 매개변수를 전달해야 한다.

유저 수정

 

보면 age 값 하나를 바꾸기위해 id와 name의 값도 필요한 것을 볼 수 있다. 지금은 프로퍼티가 3개로 문제되진 않지만 User 타입이 1000개의 프로퍼티를 가진 타입이라고 상상해보자. 그러면 앞으로 로직을 작성할 때 끔찍하다고 느낄 것이다.

 

이런 상황을 해결하기 위해 타입을 살짝 변환해서 적용해야 하는데, 가장 좋은 방법이 맵드 타입을 사용하는 것이다.

우선, 유저 수정부는 다음과 같이 변경할 수 있다.

맵드 타입 1

 

미리 설명을 못 했는데 참고로, 맵드 타입은 인터페이스로는 불가능하다.

코드를 보면 PartialUser라는 타입을 선언하여 굉장히 복잡하게 작성하였다. 그리고 updateUser의 매개변수로 age 하나만 전달이 가능하게 됐다.

위에 PartialUser 타입을 자세히 살펴보자.

PartialUser

 

우선, 인덱스 시그니처 방식과 유사하게 key 부분과 value 부분이 나뉘어있다. value 부분은 앞서 설명한 인덱스드 엑세스 방식으로 작성되었고, key 부분은 keyof 연산자를 이용해 User 타입의 key를 모두 설정해주었다. 그리고 옵셔널 프로퍼티를 설정하여 수정할 프로퍼티만 매개변수로 입력받을 수 있게 설정하였다.

2. 유저 조회

유저 조회의 경우 User 타입을 그대로 사용해도 큰 문제가 없지만 일반적으로 조회로 얻은 데이터는 변경하지 않으므로 다음과 같이 변경해볼 수 있겠다.

맵드 타입 2

 

유저 수정과 마찬가지로 맵드 타입으로 필요한 프로퍼티를 불러오고 그들을 모두 읽기 전용으로 정의하여 수정이 불가능하게 하였다.

 

맵드 타입은 실제 서비스를 구현하는 과정에서 많은 활용이 될 것 같다. 각 메서드에 따라 필요한 데이터들이 다른데 그때마다 새로운 타입을 만드는 것이 아닌 설계 단계에서 정의한 타입으로부터 파생하여 필요한 타입을 재정의하는 방식이 OOP적 프로그래밍에서도 중요하게 적용될 것 같다.

참고자료

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

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