[Typescript] 다른 타입에는 다른 변수 사용하기!

let id = "12-34-56";
fetchProduct(id);
id = 123456;
fetchProductBySerialNumber(id);

자바스크립트에서는 한 변수를 다른 목적을 가지고 다른 타입으로 재사용해도 된다.
하지만, 타입스크립트에서는 오류가 발생한다. 이미, id에는 string 형식으로 타입이 지정되었기 때문에 string 타입에는 Number 타입을 지정할 수 없다.

이를 통하여 알 수 있는 중요한 사실이 있는데,

변수의 값은 바뀔 수 있지만 그 타입은 보통 바뀌지 않는다.

라는 관점을 잘 이해하고 있어야 한다. 타입을 바꿀 수 있도록 하려면, 새로운 변수값을 포함할 수 있도록 확장하는 것이 아니라 타입을 더욱 작은 범위로 제한해야 한다.
오류를 발생시키지 않고 올바르게 적으려면 아래와 같이 코드를 수정해야 한다.

let id: string | number = "12-34-56";
fetchProduct(id);
id = 123456
fetchProductBySerialNumber(id);

단순 할당문에서 유니온 타입으로 범위가 좁혀졌기 때문에 오류가 발생하지 않는다. 그러나, 되도록이면 같은 이름으로 다른 타입의 변수를 설정하지 말고, 이름이 다른 별도의 변수를 도입하는 것이 올바르다.
변수를 무분별하게 재사용하면 타입 체커와 사람 모두에게 혼란을 주기 때문에 사용을 지양하는 것이 좋다.

마지막으로 다른 타입에는 별도의 변수를 사용하는 것이 좋은 이유를 정리해보고자 한다.

• 서로 관련이 없는 두 개의 값을 분리한다.
• 변수명을 더욱 구체적으로 적는다.
• 타입 추론을 향상시키며, 타입 구문이 불필요해진다.
• 타입이 조금 더 간결해진다.
• let 대신 const로 변수를 선언할 수 있다.