Type Narrowing

“타입의 범위를 좁히면 코드가 더욱 안전해집니다.”

https://www.carlrippon.com/ 번역글입니다. [Original Post]

6 ways to narrow types in TypeScript

타입스크립트 프로그램에서 변수는 덜 정확한 타입에서 더 정확한 타입으로 변할 수 있습니다. 이 과정을 type narrowing이라고 합니다. 타입 에러를 피하기 위해 아래처럼 type narrowing을 이용할 수 있습니다.

이번 포스트에서는 6가지 방법의 type narrowing을 알아보겠습니다.

1. 조건문을 이용한 타입 확인

위 Animal 타입을 이용하는 아래 addLeg 함수는 타입 에러가 발생할 수 있습니다.

legs 프로퍼티가 undefined가 될수 있기 때문에 타입 에러가 발생할 수 있습니다. 그리고 undefined에 1을 더하는 것 또한 말이 되지 않습니다. 지금 상황에서 타입 에러를 피하기 위해서는 legs 프로퍼티를 이용하기 전에 legs가 truthy인지 확인하면 됩니다.

legs는 if문 전에는 number | undefined 타입입니다. 하지만, if문후에는 number 타입으로 좁혀지게(narrow) 됩니다.
이 방식의 type narrowing은 여러 타입을 가질 수 있는 변수에서 null과 undefined를 제외시키는데에 유용한 방법입니다.

2. typeof 타입 가드

인자가 string이면 복사하여 붙이고, number라면 곱하기 2를 하는 아래 함수를 살펴봅시다.

item 인자는 if문전에는number혹은 string 타입입니다. if문안에서는 string으로 좁혀지고, else문에서는 number로 좁혀지게 됩니다.

위 방식을 typeof 타입 가드 패턴이라고 합니다. 원시 타입을 type narrowing할 때 유용합니다.

3. instanceof 타입 가드

우리가 사용하는 타입들은 보통 원시 타입보다 복잡합니다. 아래 코드를 살펴보죠.

아래 함수는 타입에러가 발생합니다.

에러의 이유는 contact가 firstName프로퍼티를 가지지않은 Organisation 타입일 수 있기 때문입니다.

클래스 타입을 이용할 때 instanceof 타입 가드를 이용하면 편합니다.

if문안에서 contact의 타입은 Person으로 좁혀집니다(narrow). 그러므로 위에서 발생했던 에러를 피할 수 있게 됩니다.

4. in 타입 가드

우리는 타입을 표현할 때 항상 class를 이용하진 않습니다. 위에서 클래스를 이용하여 표현된 타입을 아래처럼 바꿀 수 있습니다(with interface)

instanceof 타입 가드는 interface 혹은 타입 별명(aliases)들에는 작동하지 않습니다. 그대신에 우리는 in 타입 가드를 이용할 수 있습니다.

if문안에서 contact는 Person 타입으로 좁혀지고 타입 에러가 발생하지 않게 됩니다.

5. type predicate를 이용한 타입 가드

Type predicates are a special return type that signals to the Typescript compiler what type a particular value is.

위 함수의 리턴 타입은 Promise<any> 로 추측됩니다. 그래서 이 함수의 리턴값에 변수를 할당하면 any 타입을 가지게 됩니다.

const rating = await getRating("1"); // type of rating is 'any'

이는 아무런 타입 확인이 일어나지 않는다는 말입니다.

type predicate를 가지게 함수를 만들면 우리의 코드는 더욱 타입에 안정적여질 수 있습니다.

rating is Rating은 위 함수에서 타입 서술어type predicate입니다.
type predicate가 사용된다면 반드시 boolean값을 리턴해야 합니다.
아래 코드는 위에서 정의한 type predicate를 가진 isValidRating 함수를 이용한 getRating 함수입니다.

async function getRating(productId: string) {
  const response = await fetch(
    `/products/${productId}`
  );
  const product = await response.json();
  const rating = product.rating;
  if (isValidRating(rating)) {
    return rating; // type of rating is `Rating`
  } else {
    return undefined;
  }
}

isValidRating()을 이용하였기 때문에 if문안에서 rating의 타입은 Rating이 됩니다.

6. assertion signature을 이용한 타입 가드

getRating을 조금 다르게 타입가드해보려고 합니다.

checkValidRating 함수를 추가했습니다. 이로 인해 getRating함수는 rating이 유효하지 않은 값일 때 에러를 발생하게 됩니다.

그리고 checkValidRating이 성공적으로 실행된다면 그 결과로 rating의 타입은 알아서 좁혀지게(narrowed) 됩니다.

assertion 시그니처와 함께 타입 가드 함수를 만들수 있습니다.

asserts rating is Rating 은 위 함수의 assertion signature입니다. 만약 위 함수가 에러없이 리턴된다면 rating 인자의 타입은 Rating의 타입으로 범위가 좁혀집니다.

정리

타입스크립트는 자동으로 코드의 조건에 따라 변수의 타입이 좁혀집니다.

• truthy 조건 확인을 통해 타입중에서 null 과 undefined 을 제외시킬 수 있습니다.
• typeof 타입 가드를 이용하여 원시 타입들의 조합에서 범위를 좁히고 확인합니다.
• instanceof 를 이용하여 클래스 타입들의 타입을 좁히고, 확인합니다.
• in 타입 가드를 이용하여 객체 타입들의 범위를 좁히고 확인합니다.
• 함수 타입 가드들을 이용하여 더 복잡한 상황에서 타입을 확인할 수 있습니다.

내용이 헷갈리다면 원본을 확인하시기 바랍니다 ! [ Original Post ]