타입스크립트를 시작하기 전에

자바스크립트의 문제점

자바스크립트는 타입이 동적으로 결정이 되는 언어다. 이것의 장점이라고 한다면 자바스크립트를 처음 접할 때 배우기는 쉬울 것이다. 하지만 코드가 길어지면 유지보수하는 데 어려움을 겪을 수 있다.

우리가 작성해왔던 한 달 전, 1년 전의 코드를 어떻게 작성했는지 기억하는 것은 힘들 것이라고 생각한다.

아래 코드로 예를 들어 보자.

function add(var1, var2) {
  return var1 + var2;
}

var1에 숫자가 아닌 문자열 '1'이 들어가면 var2에 숫자가 들어가더라도 자동으로 문자열로 타입이 변환되기 때문에 이 함수의 리턴값은 우리가 원하는 값이 아니게 된다.

위 예제는 add라는 함수가 숫자를 더한다는 행위를 하는 함수인 것을 알기 때문에 var1과 var2에 숫자를 넣는 것이 당연할 수 있다.
하지만 함수가 많아지고, 함수가 복잡해지면 큰 문제가 발생할 가능성이 높다.

해결 방안?

그래서 이를 조금이나마 해결할 방안으로 코드에 주석을 달아서 해당 변수의 타입을 작성해주면 괜찮지 않을까?

하지만 주석을 달아주는 것을 잊어버리는 순간...

그러면 자바스크립트에 존재하는 typeof 연산자를 써보는 것 어떨까?

function addType(num1, num2) {
  if (typeof num1 === 'number' && typeof num2 === 'number) {
    return num1 + num2;
  } else {
  	throw new Error('숫자만 입력하세요');
  }
}

하지만 이것도 실행을 해봐야지만 에러가 발생했는지 알 수 있고, 함수의 인수가 많아지면 코드가 굉장히 길어진다는 문제점이 있다. 우리가 코드를 작성하는 동안에 우리가 원하는 타입이 들어갔는지 모르는 것이다.

이것들을 해결해주는 것이 바로 타입스크립트다.

타입스크립트를 이용해 위의 add 함수를 어떻게 작성할 수 있는지 간단하게 알아보자.

function add(num1: number, num2: number) {
  return num1 + num2;
}
console.log(add(1, 2));
console.log(add(1, '2')); // '2'에 빨간 줄이 그임

타입스크립트를 쓰게 되면 자바스크립트가 실행되기 전에 코드가 어디서 잘못되었는지를 확인할 수 있기 때문에 함수 정의, 클래스 정의, 변수 정의같은 모든 정의를 좀 더 명확하게 할 수 있다.

후기

본격적으로 타입스크립트를 배우기 전에 자바스크립트의 불편한 점, 어떠한 문제점이 있는지 이해하는 것이 중요한 것 같다.
타입을 정해줌으로써 특정 함수나, 변수에 내가 원하는 값이 아니라면 코드를 작성하는 단계에서 바로 에러를 발견할 수 있는 점이 가장 큰 장점이라고 생각했다.