[타입추론 20] 다른 타입엔 다른 변수를

1. JS vs TS
JS의 가장 큰 특징 중 하나는 암묵적 타입 변환이다. 그러나 TS의 구별되며 중요한 관점은 '변수의 값은 바뀔 수 있되 그 타입은 보통 바뀌지 않는다'라는 것이다.

예를 들어 아래와 같이 선언/재할당된 변수가 있을 때 JS는 아무 문제 없을 것이나, TS는 타입 체커가 오류를 내뿜는다.

 

let id = "12-34-56"; // TS기준 string타입으로 추론된다
id = 123456; // number타입으로 재할당 못함

2. 타입 변환에 대하여
타입은 보통 바뀌지 않는다고 한들 타입을 바꿀 수 있는 방법들은 여럿 존재한다. 그러나 해당 방법들의 공통된 방향성은 타입의 범위를 좁혀나가는 것이지, 새로운 타입을 포함하도록 확장해나가는 것이 아니다.

예를 들어 위 예제에서 id의 타입을 let id :string | number = "...";로 선언해두면 오류 자체는 사라진다. 그러나 이후 id 사용시 어떤 타입인지 확인해야되며, 더 많은 문제가 발생할 소지가 있다.

3. 다른 타입엔 다른 변수를
다시 위 예제에서 가장 바람직한 방법은 별도의 변수를 사용하는 것이다. 

const id = '12-34-56'; 

const serial = 123456; 

 

이러한 방식이 바람직한 이유는 다음과 같다.

• 서로 관련 없는 값들을 분리할 수 있다
• 구체적인 변수명으로 가독성이 좋다
• 타입 추론이 더 수월해지며, 이 덕분에 별도의 타입 선언이 필요없다
• 타입이 더 간결해진다 ( string | number vs string, number )
• let 대신 const를 사용할 수 있다 (const는 let대비 타입 체커가 타입 추론하기에 더 좋다)
  
  

※ 가려지는 변수(shadowed variable)
아래 예제처럼 동일한 변수명을 갖되 별도의 실행 컨텍스트를 갖는 경우를 말한다. 변수의 재할당/재사용과는 전혀 관련이 없으며, 많은 개발팀들은 린터 규칙을 통해 shadowed variable의 사용을 막고 있다.

const id = "12-34-56";
function getUserById( ) {
  const id = 123456; // 
  return ...
}