[TS] 우아한 타입스크립트 세미나 - 2부

지난 포스팅에 이어서 이웅재님의 우아한 타입스크립트 세미나 2편을 정리해 보려고 한다. 이번 포스팅에서는 실전 타입스크립트 코드를 작성하는 측면에서 적용해볼 수 있는 부분들에 대해 알아본다.

 

1. Conditional Type 활용하기

Conditional Type이란 타입이 조건부로 적용되는 것을 의미한다. 타입 T를 제네릭 형태로 받는다. 예를 들면 아래의 예제 코드처럼 T가 string인 경우는 StringContainer로, T가 number이면 NumberContainer로 받을 수 있다.

이번에는 infer라는 키워드를 살펴보도록 하자. 조건부 타입에서 infer는 타입변수를 참조하기 위해서 사용이 된다. 프로미스의 제네릭은 보통 리턴타입을 의미한다. 아래의 예제는 Promise의 배열인 경우 K를 타입으로 반환한다는 의미이다.

타입스크립트에는 다양한 내장 조건부 타입이 있어서 적절하게 필요에 맞게 사용할 수 있다. 대표적인 것들만 몇 가지 소개한다.

 

2. Overloading 활용하기

일반적인 프로그래밍 언어에서 함수의 오버로딩은 함수명이 같고 시그니처가 다른 형태를 의미한다. 그리고 각각의 시그니처 별로 다른 로직을 가지게 된다. 이는 런타임에서 실행된다. 반면 타입스크립트의 오버로딩은 타입처리만 도와주는 오버로딩이다. 로직 구현은 함수 안에서 알아서 구현해 주어야 한다.

이번에는 클래스 메서드의 오버로딩을 살펴보도록 하자. 작성자의 입장에서 두 개의 시그니처(프로퍼티)를 가지고 하나일 때, 두개 일 때 나누어서 메서드의 로직을 처리 해 주었다.

이렇게 되었을 때 사용자의 입장에서는 다음 두 가지 방식으로 같은 이름의 메서드를 선택해서 사용할 수가 있다. VS Code 같은 IDE에서는 메서드에서 어떠한 프로퍼티를 어떠한 타입으로 쓸 수 있는지 친절하게 알려주는 경우가 많아서 참고하여 사용하면 오버로딩을 잘 활용할 수 있다.

 

3. readonly, as const를 남발하기

타입스크립트 공식 문서에는 readonly에 대해서 다음과 같이 정의가 되어 있다.

readonly properties must be initialized at their declaration or in the constructor.

아래 예제에서 as const를 붙이지 않으면 ReadonlyArray로 타입을 지정한 값이 Union Type으로 되게 지저분하게 나오는 것을 볼 수 있는데, as const를 사용하면 깔끔하게 원하는 값만 나오게 된다.

readonly는 Mapped Type으로도 사용해 볼 수가 있다. 타입을 Readonly로 바꾸게 되면 다음과 같이 값을 바꿀 때 에러를 뱉게 된다.

Mapped Type은 직접 만들어서 쓸 수 있고, 자주 쓰이는 Mapped Type은 내장되어 있다. 대표적인 타입들만 살펴보고 가도록 하자.

 

4. optional type 보단 Union Type을 사용하기

optional 타입으로 만들게 되면 다음과 같은 예제에서 에러를 정확하게 잡을 수가 없다. getResult1()으로 만든 r1에 data와 error가 동시에 있을 수도 있는데 그러한 상황이 발생하면 안 된다.

반면 아래와 같이 union 타입으로 만들게 되면 data와 error가 명확하게 구분되어 오류 없는 코드를 작성할 수 있다. Result2는 in 연산자 타입 가드(type guard)를 사용하였고 Result3은 리터럴 타입 가드를 사용했다.

 

5. never 사용하기

never는 기존에 조건부 타입을 처리할 때 유용하게 사용할 수 있었다. 타입 검사를 할 때 never를 통해 좀 더 엄밀하게 할 수 있는 방법을 알아보고자 한다. 먼저 다음과 같은 ToastType이 있다고 가정해보자.

만약 타입에 대해서 단순하게 if-else 문 등으로 처리를 한다면... ToastType이 추가되거나 수정될 때 문제가 생길 수도 있다. 분기처리가 제대로 이루어 지지 않기 때문이다. 따라서 모든 조건들을 태우고 앞선 조건들에 처리되지 않은 경우 에러를 내보낼 수 있는 처리를 해 주는 것이 안전하다.

이 방법은 else가 없이 if 문만 가지고도 처리할 수 있고, 그 방법은 switch 문을 통해 동일하게 아래와 같이 만들어 볼 수가 있다.

 

이렇게 우아한 타입스크립트 세미나를 두 번에 나누어서 정리해 보았다. 공부하면서 아직 내가 타입스크립트를 한참 제대로 쓰지 못했었구나 라는 반성을 많이 하게 되었다. 더 열심히 공부해서 적절하게 타입스크립트의 장점을 잘 쓰는 개발자가 되고 싶다 ㅋㅋ

 

참고자료

• 우아한 타입스크립트 세미나 [이웅재님]
• www.typescriptlang.org/