서로소 유니온 타입

지금까지 배운 타입 표기법을 이용해서 타입을 더 직관적으로 표현할 수 있다.

아래 코드를 먼저 보자.

첫 번째 타입 사용

 

딱히 문제 있는 코드는 아니다. 코드를 보면 위에 각각의 타입을 정의할 때는 어떤 타입인지 알기 쉬우나, 실제로 사용되는 login 함수에서는 각 조건 분기가 어떤 타입으로 좁히는지 직관적으로 알기가 어렵다.

이렇게 코드를 작성할 경우 나중에 다른 사람이 유지보수를 할 경우 이 코드를 이해하기까지 시간이 많이 필요할 것 같다.

이럴 때는 다음과 같이 두 가지 개선방안이 있다.

1. 코드에 주석 달아서 설명하기
2. 서로소 유니온 타입으로 만들어서 직관성 높이기

주석 다는 것이야 쉬우니 넘어가고 여기서는 2번 방법을 소개하려 한다.

서로소 유니온 타입이란?

조금 말이 어렵게 표현되었는데 우선 서로소란 두 수 사이에 1을 제외한 공통 약수가 존재하지 않는 경우를 말한다.

타입스크립트에서 이 개념을 가져오면 둘 이상의 타입에서 서로 공통적인 부분이 존재하지 않는 경우를 의미한다..

어떻게 만들지?

위에 타입들은 공통적으로 name이라는 프로퍼티가 존재한다. 따라서, 교집합이 존재하는데 이를 다음과 같은 방법으로 교집합을 제거해줄 수 있다.

서로소 유니온 타입 제작

 

각 객체에 tag 프로퍼티를 만들고 타입 리터럴을 이용해 제한을 두었다. 이렇게 만들 경우 name과 tag라는 공통적인 프로퍼티가 존재하지만, tag라는 프로퍼티가 한 가지의 값만 가능한 타입이 되면서 서로의 타입에서 공통성을 제거하게 된다.

따라서, 직관적이지 않던 login 함수도 다음과 같이 더욱 직관적으로 작성할 수 있다.

직관적인 login 함수

조금 더 알아보자

서로소 유니온 타입이라는 것이 아직 감이 잘 안 올 수 있다. 하지만, 코드가 더욱 직관성있게 변했다는 것에는 동의할 것이다. FE에서 API 통신할 때 많이 사용하는 상태 관리를 예시로 조금 더 살펴보자.

비동기 작업 타입 정의

 

우선, 비동기 통신에 대한 타입을 위 사진과 같이 정의하고 각 비동기 통신 작업에 대한 객체를 정의하겠다.

그리고 아래 사진과 같이 비동기 작업 함수에서 적용하려 한다.

비동기 작업 함수 1

 

그러자 사진과 같이 에러가 발생했다. 이유는 AsyncTask라는 타입에서 state 프로퍼티로 타입 구분을 진행해도 error 프로퍼티와 success 프로퍼티는 여전히 선택적 프로퍼티이기 때문이다.

따라서, 타입스크립트에서는 해당 프로퍼티의 값이 존재하지 않을 수도 있다고 경고를 띄운다.

이를 해결하기 위해 다음과 같은 방식을 고려해볼 수 있다.

비동기 작업 함수 2

 

하지만, 앞서 설명했듯 옵셔널 체이닝과 Non Null 단언은 최대한 지양하는 것이 좋다. 이는 근본적인 해결책은 아니기 때문이다. 따라서, 위에서 배운 서로소 유니온 타입으로 타입을 재정의하여 이를 해결해 보겠다.

서로소 유니온 타입 2

 

위 사진과 같이 각 상태에 따른 타입을 각각 정의하고 AsyncTask로 유니온 타입을 제작하였다. 또한, 공통 집합을 제거하기 위해 state 프로퍼티를 타입 리터럴로 사용하여 구분을 하였다.

그렇게 타입을 정의하였더니 비동기 작업 함수에서 필요했던 옵셔널 체이닝과 Non Null 단언이 필요없어졌다.

정리

오늘은 개념이 조금 어려웠을 것 같다. 우선, 서로소 유니온 타입이라는 용어 자체가 낯설 것이고 그 개념도 잘 이해가진 않았으리라 본다.

개인적으로는 지금까지 배운 타입스크립트를 좀 더 직관성있게 그리고 더 안전하게 사용하는 방식을 배웠다고 생각하길 바라며, 더 자세한 이해가 필요하신 분들은 아래 강의를 통해 직접 강의를 들으시길 추천드린다.

참고자료

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

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