[이펙티브 타입스크립트+26] 타입 추론에 문맥이 어떻게 사용되는지 이해하기

3장 타입 추론
아이템 26 | 타입 추론에 문맥이 어떻게 사용되는지 이해하기

3줄 요약
1. 타입스크립트는 문맥에 따라 타입 추론을 다르게 한다.
2. let / const 키워드의 타입 추론은 다르다. const 키워드 사용 시에 더 좁은 타입으로 추론한다.
3. const 키워드는 얕은 상수 선언이고 as const 키워드는 깊은 상수 선언이다.

참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다.

---

1) 변수를 let / const 키워드를 이용하여 선언할 때 타입 추론

변수를 let 키워드를 이용하여 선언할 때와 const 키워드를 이용하여 선언할 때 타입 추론이 다릅니다.
예시를 통해 살펴보겠습니다.

string 타입으로 추론된 타입.

먼저 let 키워드로 변수를 선언한 nameLet 변수는 string 타입으로 선언됩니다.
상식적으로 보입니다. 그러면 const 키워드를 이용한 변수 선언에서는 타입이 어떻게 추론될까요?

"kim" 타입으로 추론된 타입.

이번에는 string 타입으로 추론되지 않았습니다.
"kim"이라는 리터럴 타입으로 추론된 것을 확인할 수 있습니다.

이로 미루어보아 변수를 선언할 때 재할당 가능성이라는 문맥을 바탕으로 타입 추론을 다르게 한다는 것을 확인할 수 있습니다.

 

2) const 키워드와 as const 차이 이해하기

1번에서 사용한 것을 튜플에도 적용해보겠습니다.

number[] 타입으로 추론된 타입.

let 키워드를 이용하여 튜플 혹은 배열을 선언하게 되면 타입은 배열 타입으로 추론됩니다.
이제 const를 키워드를 이용하여 변수를 선언하면 어떻게 될까요?
number[] 타입이 아닌 [number, number] 타입이 될 것 같습니다.

number[] 타입으로 추론된 타입.

그러나 결과는 number[] 타입으로 추론된 것을 확인할 수 있습니다.
왜 이렇게 동작하게 되는 걸까요?

이유는 const 키워드는 식별자가 가리키는 참조가 변하지 않을 거라고 말하기 때문입니다.
참조(화살표)는 변하지 않지만 참조하고 하고 있는 값은 언제든지 변할 수 있기 때문입니다.

참조는 변하지 않지만 참조하고 있는 값은 변할 수 있다.

const 키워드를 통해 선언된 배열이라도 이렇게 내부 값을 조작할 수 있습니다.
때문에 const 키워드를 통해 선언한 변수는 얕은(shallow) 상수라고 합니다.

그러면 선언을 할 때 변수를 깊은(deeply) 상수로 선언을 하려면 어떻게 할 수 있을까요?
이때 사용하는 것이 as const 입니다.
값의 내부까지 상수라는 사실을 타입스크립트에게 알려줍니다.

readonly [1, 2] 타입으로 선언된 타입.

그러나 이 방식의 단점은 조금 과할 정도로 타입이 정확합니다.
readonly [number, number] 타입이 아닌 readonly [1, 2] 타입으로 만들어졌습니다.
이 점을 유의하여 as const 키워드를 사용하여야 합니다.

 

 

 

Materials From
1. <이펙티브 타입스크립트>(댄 밴더캄 지음, 장원호 옮김, 인사이트 2021)
2. 타입스크립트 공식 홈페이지 | https://www.typescriptlang.org/

Typed JavaScript at Any Scale.