[TS] JS vs TS 타입

자바스크립트의 타입은 동적타입, 타입스크립트의 타입은 정적타입이라고 불린다.

동적, 정적이라는 단어에서 유추할 수 있겠지만, 자바스크립트는 동적타입 언어라 변수를 선언할 때, 어떤 타입이 와도 이해해준다. 예를 들면, 다음과 같이 a 라는 변수에 number 타입의 1을 할당해줘도, string 타입의 '문자'를 할당해줘도, boolean 타입의 true가 할당해줘도 자바스크립트는 이를 너그럽게 이해해 준다.

var a = 1
a = '문자'
a = true

반면에, 이런 부분에 굉장히 민감하다. 타입스크립트는 정적타입의 언어이기 때문에, 변수의 타입을 처음부터 정해주고 시작한다. 다음과 같이 a라는 변수의 타입을 number 타입으로 정해주면 빼도 박도 못하고 숫자만 할당할 수 있다. 만약, number타입으로 타입을 정해주고 string 타입의 value를 할당하려고 하면 타입 오류가 발생할 것이다.

var a: number = 1
a = '오류가 발생'

동적타입은 런타임 환경에서 타입을 알 수 있기 때문에, 코드를 실행해 보기 전까지 타입 오류를 확인하기 어렵다. 반면, 정적타입은 개발을 하면서 타입을 분석하기 때문에, 타입 오류를 바로 바로 확인할 수 있다.

• 자바스크립트

function sum (num1, num2) {
  // 1.javascript가 런타임에 자동으로 실행
  if(typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw new Error();
  }
  return num1 + num2;
}

sum(10, 4678)

• 타입스크립트

function sum(num1: number, num2: number): number {
  return num1 + num2;
}
sum(10, 4678)

다음 코드에서 볼 수 있듯이, 자바스크립트는 sum 이라는 함수의 코드를 실행하면 1번의 코드를 통해서 인자의 타입을 확인하고, number 타입이 아니면 그제서야 오류를 반환한다.

하지만, 타입스크립트는 sum 이라는 함수의 코드를 작성하는 중에, 인자의 타입을 설정을 안해주었거나, 잘못된 타입이 함수 인자로 들어올 경우 강력하게 어필해 자아성찰할 수 있도록 도와준다.