TS001. 자바스크립트 -> 타입스크립트 변경 시 이점

자바스크립트 (동적 타입 언어) 의 한계

• 자바스크립트는 동적 타입 언어라 태생적 한계가 몇가지 있다.

런타임 타입 오류

• 함수의 매개변수로 의도치 않은 타입이 들어온다고 해도 런타임에 알 수 있다.
• 아래의 코드와 같이 무언가를 더하는 add() 라는 함수가 있다면, 들어오는 타입에 따라 반환 결과가 완전히 달라진다.
• MDN Plus 연산자 스펙 에 따라 문자열과 숫자가 + 연산자를 만나면, 숫자 타입의 매개변수는 "default" 를 힌트로 사용하여 형변환되어 문자가 된다.

function add(a, b) {
  return a + b;
}

add(1, 2);
add(1, "2"); // coersion 발생

• 아래와 같이 타입 체크를 런타임에 해줄 수 있지만, 말 그대로 런타임에 타입 체크를 하는 것이기 때문에 실행한 뒤에야 잘못된 값이 들어온 걸 알 수 있다.
• 실제로 서버를 운영하고 있다면, 런타임에야 문제를 알 수 있는 것이 문제가 될 수 있다.

function addTypeSafely(num1, num2) {
  if (typeof num1 !== "number" || typeof num2 !== "number") {
    throw Error("숫자만 파라미터에 입력해주세요.");
  }

  return num1 + num2;
}

타입스크립트 (정적 타입 언어) 를 사용하면 좋은 점

타입스크립트를 이용한 정적 타입 체크

• 의도하지 않은 값이 인자로 넘어오는 것을 정적 분석 단계에서 미리 알 수 있다.

function add(a: number, b: number) {
  return a + b;
}

add(1, 2);
add(1, "2"); // coersion 발생

• 실제 코드를 실행하기 전에 정적 분석 단계에서 아래와 같이 빨간줄이 뜬다.

기타 타입스크립트의 장점

• 런타임 타입검사가 필요 없어짐
• 대규모 코드베이스를 관리할 때 스펙이 명확하여 리팩토링이 좀 더 쉬움
• 명시적 유형 선언이 많이 되어있어 협업에서 코드의 가독성과 이해도가 올라감
• 자동완성, 오류 감지, 코드 탐색 등 IDE 에서 많은 지원을 받을 수 있음
• 버그와 확장성 문제를 조금 줄일 수 있음
  • 정적 분석을 통해 버그를 좀 더 빠르게 발견 가능