러닝 타입스크립트 리뷰 :: 마이구미

이 글은 "러닝 타입스크립트" 이라는 책을 리뷰한다.
본인은 평범한 프론트엔드 개발자이다. 개인적인 생각과 해석이 들어가 있을 수 있다.
책 링크 - https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=307683870

 

 

제목 그대로 타입스크립트 관련 책이다.

항상 사용하던 방식대로, 조금 더 복잡한 타입이 필요하면 구글링해서 사용하고있다.

조금 더 타입스크립트 능력을 다지기 위해서 관련 책을 구매해서 읽어보게 되었다.

 

각 주제에 대해 과하지않게, 쉽게 이해할 수 있는 예제들로 구성되어있다.

하지만 간단한 예제라서, 예제를 통해 한번 더 직접 활용하면서 이해하는 것이 필요해보인다.

 

개인적인 기준으로 몇가지를 기록하려고 한다.

기록하지 않은 것들 이외에도 유용한 내용들은 많았다.

다만, 실제 사용 사례로 연결되는 것이 잘 그려지지 않거나, 아직까지는 이해가 부족한 것들이 존재하여 기록하지 못한 것들도 있다.

 

---

 

내로잉(Narrowing)

 

내로잉이라는 용어를 사실 모르고 있었다.

우리는 타입 추론을 확정시키기 위해 typeof, in 문법, 타입 가드 등을 활용하고 있다.

이러한 방식을 내로잉이라는 용어로 표현한다.

 

 

복잡하면 복잡할수록 타입 검사기의 메시지도 이해하기 더 어려워집니다.

 

타입을 묶어서 관리하면 다른 곳에서도 재사용하기 좋다는 것은 누구나 알고 있다.

타입 오류 메시지에 대해서는 깊게 생각해보지 않았는데 이번 기회로 알게 되었다.

 

[as-is]

 

[to-be]

 

 

void 는 아무것도 반환하지 않는 함수를 위한 것이고, never 는 절대 반환하지 않는 함수를 위한 것

 

반환 타입을 never 로 정의하여 해당 함수를 호출한 후 모든 코드가 실행되지 않음을 나타낼 수 있다.

 

 

fail 함수의 반환 타입이 void 라면, 여전히 if 문의 아래 코드의 param 의 타입은 unknown 이다.

하지만 반환 타입이 never 이라면, param 의 타입은 어떻게 될까?

 

 

never 반환 타입으로 인해, string 이 아니라면 fail 함수가 실행되고, 그 이후의 모든 코드를 실행되지 않는다는 것을 의미한다.

이것이 의미하는 바는 string 이여야만 workWithUnsafeParam 함수 내부의 모든 코드가 실행된다는 것을 의미한다.

그 결과, 결국 if 문 아래의 경우에는 string  좁혀질 수 있게 되는 것이다.

 

 

키/값 쌍을 저장하려고 하는데 키 값을 미리 알 수 없다면 Map 을 사용하는게 더 안전하다.

 

동적인 key 를 가지는 객체를 활용하는 경우, 인덱스 시그니쳐를 많이 활용한다. { [i: string]: Date }

이러한 경우에는 타입 검사는 통과했으나, 런타임 오류를 맞이할 수 있으니 주의해야한다.

 

 

 

unknown 훨씬 더 제한적으로 취급한다.

 

any 대신 unknown 을 사용하라는 말은 많이 알려져있다.

unknwon 타입인 값에 접근할 수 있는 유일한 방법은 instanceof 나 typeof 또는 타입 어서션을 사용하는 것이다.

이처럼 값의 타입을 좁혀 제한을 두게 한다는 의미로써, "훨씬 더 제한적으로 취급한다" 를 설명할 수 있다.

 

 

 

타입 서술어(type predicate) 또는 사용자 정의 타입 가드(user-defined type guard) 라고 부르는 is 키워드 문법

 

is 문법을 통해 특정 타입으로 확정하는 방식을 "타입 가드" 라고만 칭하고 있었는데, 조금 더 상세한 용어가 있었다.

 

 

 

제한된 제네릭 타입 - 타입 매개변수를 제한하는 구문은 매개변수 이름 뒤에 extends 키워드를 배치하고 그 뒤에 이를 제한할 타입을 배치합니다.

 

function get<T> (container: T, key: keyof T) {
  return container[key]
}

function get<T, Key extends keyof T> (container: T, key: Key) {
  return container[key]
}

 

2가지 get 함수는 key 를 위한 제네릭 타입이 다른 상황이다.

2가지 모두 객체의 키는 container 를 기준으로 모두 추론할 수 있지만, keyof T 만으로는 value 의 타입을 구체적으로 추론할 수 없는 상황이다.

extends 를 통해 타입을 보다 구체적으로 추론할 수 있게 할 수 있다.

 

 

 

resolveJsonModule

 

타입스크립트는 기본적으로 json 파일을 지원하지 않지만, 이 옵션으로 지원해줄 수 있다.

새로운 ts 파일을 생성해서 json 을 imort 할 수 있도록 지원해준다.

https://www.typescriptlang.org/tsconfig#resolveJsonModule

 

useUnknownInCatchVariables

 

타입스크립트 4.4 버전에서 추가된 옵션으로 error 타입 추론을 any 에서 unknown 으로 해주는 옵션이다.

"strict": true 모드 일경우에는 자동적으로 해당 옵션은 true 로 설정되어, 대부분 해당 옵션을 사용하고 있을 것이다.

덕분에 대부분 내부에서 타입을 제한하면서 사용하게 된다.

https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables

 

 

유추된 타입 - infer

 

infer 키워드는 굉장히 유용하지만, 쓰면 쓸수록 복잡하긴하다.

책에서도 많이 다루고 있진 않지만, 알아두면 좋은 녀석이긴하다.

 

 

유니언 타입에 있는 never 는 무시됩니다.
유니언 타입(|)에서 never 가 무시되는 동작은 조건부 타입과 매핑된 타입에서 값을 필터링하는 유용합니다.

 

유니언 타입에 있는 never 는 무시된다는 것을 이용해서 응용할 수 있다.

 

type OnlyStrings<T> = T extends string ? T : never
type RedOrBlue = OnlyStrings<"red" | "blue" | 0 | false> // "red" | "blue"

 

0, false 의 경우에는 조건부 타입에서 거짓으로써, never 타입으로 된다.

위에서 언급했듯이, never 는 무시함으로써 0, false 는 필터링되는 모습을 확인할 수 있다.

 

 

이것들을 응용하면, [keyof T] 를 활용해 결과를 유니온 타입으로 만든 후, never 를 필터링하게 의도한다.

 

 

템플릿 리터럴 타입

 

템플릿 리터럴 타입은 다국어 처리할 경우 많이 사용한다.