조건부 타입

JS 문법을 다룰 때 이런 코드를 사용한 경험이 있을거다.

return a > 10 ? a * 2 : a;

 

삼항연산자를 이용한 분기인데, 타입에서도 이를 이용해 조건부 타입을 설정할 수 있다.

조건부 타입 1

 

type A의 경우 number 타입이 string 타입을 확장하는 경우라면 string 타입, 그렇지 않다면 number 타입으로 설정해라 라는 코드이다.

대충 예시를 보여준거라 코드가 많이 낯설 수 있다. 조금 더 현실적인 객체 타입에 대해서 살펴보자.

조건부 타입 2

 

타입 B의 경우 ObjB가 ObjA를 확장하는 타입이라면 number 타입, 그렇지 않다면 string 타입으로 정의하였다. ObjB가 ObjA의 프로퍼티를 포함하고 있으므로 ObjA의 확장 타입이고 조건이 성립하여 타입 B가 number 타입으로 정의된 모습이다.

제네릭과 조건부 타입

조건부 타입이 뭔지는 이제 확실히 알 것이다. 하지만 이런 타입 정의를 대체 어디에서 사용할까?

사용하기에 상당히 복잡한 타입인 건 맞지만 조건부 타입은 제네릭 타입과 혼합해서 사용할 경우 꽤 활용성 높게 사용할 수 있다.

제네릭 조건부 1

 

위 코드는 숫자가 들어올 경우 string 타입으로 문자가 들어올 경우 number 타입으로 변환해주는 타입이다. 제네릭과 조건부 타입을 활용하여 쉽게 타입의 전환을 만들었다.

예시

조건부 타입을 활용할 예시 하나를 살펴보자. 우선, 아래 코드처럼 입력받은 문자열의 공백을 제거하는 메서드를 만들었다고 하자.

예시 1

 

그런데, 사용자가 해당 값을 입력할 수 있고 입력하지 않을 수도 있다고 가정하자. 그러면 매개변수인 text의 타입이 string 단일 타입이 아니라 undefined와 null을 포함한 유니온 타입이어야 한다.

예시 2

 

하지만 이렇게 설정할 경우 위와 같이 메서드 로직에서 에러가 발생한다. 이를 해결하기 위해 타입 좁히기로 에러를 해결하자.

예시 3

 

잘 해결되어 보인다. 근데 진짜로 문제가 없을까? 결과값인 result를 전부 소문자로 대체하려고 다음 코드를 입력했더니 다음과 같은 에러가 발생하였다.

예시 4

 

removeSpaces 메서드의 타입 좁히기에 따라 undefined가 return 될 수 있어 발생하는 에러였다. 이 에러를 해결하는 방식으로 여러가지를 고려해볼 수 있지만 여기서는 조건부 타입을 이용해보겠다.

예시 5

 

조건부 타입을 이용해 result가 매개변수의 타입을 그대로 따라가게 만들었다. 이로써 result에 toLowerCase 메서드를 적용할 수 있게 되었다.

하지만, 이렇게 작성하다보니 이번에는 removeSpaces 메서드에서 다시 에러가 발생한다. 따라서, 함수 오버로딩을 이용해서 마지막 에러를 잡아보겠다.

예시 6

 

복잡한 과정을 거쳐서 하나의 메서드와 메서드의 사용이 완성되었다. 결론적으로 조건에 따른 타입 정의를 분기하는 방식에 대해 배웠는데, 사용 빈도가 굉장히 낮은 대신 특수한 상황들에 적용할 때 필요한 문법으로 보인다.

참고자료

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

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