왜 타입스크립트(Typescript)를 사용하여야 하는가?
필자는 React 또는 React Native에서 개발할때 Typescript를 이용 중인데 처음 개발 할때만 하더라도 Typescript에 대한 필요성을 느끼지 못했다.
그도 그럴것이 Typescript를 몰라도 Javascript만으로 개발이 가능하고 어떤 면에서 당시에 개발 속도가 더 빠르다고 생각했기 때문이다. (지금은 여기에 대해 전혀 동의하지 않는다!)
개발을 해 나가면서 위와 같은 생각이 변했고 Typescript가 개인적으론 예전에 옵션 사항이었다면 현재는 필수 사항이 되었다. 그 이유를 지금부터 설명하고자 한다.
Typescript에 대해 잘 모르시는 분을 위해 간단히 설명하자면 아래와 같다.
공식 홈페이지에 따르면 “Typescript는 정적 유형 정의를 추가하여 Javascript를 기반으로 하는 오픈 소스라고 말하고 있으며 Type을 추가함으로써 코드가 올바르게 작동하는지 확인할 수 있다” 라고 말하고 있다.
쉽게 말하면 자바스크립트에 타입이 추가된 것이며 개인적으로는 자바스크립트의 업그레이드 버전이라고 여기고 있다.
그렇다면 본론으로 들어가 왜 우리는 Typescript를 사용해야 하는가?
개발 과정에서 실제 비지니스 코드를 작성하는 시간보다 더 많이 걸리는 것이 무엇인지 생각해본적이 있는가?
나는 그 중 하나가 코드를 읽는 시간이라고 생각한다.
코드를 작성하면서 내가 작성한 변수들이 제대로 초기화 되었는지 확인하고 다른 함수에서 무엇을 반환 하는지 읽고 다시 돌아와 작성한다. 젠장! 에러가 났잖아 어디서 부터 난거지? (또 다시 위의 과정을 반복)
협업을 한다고 가정하면 그 양이 더 많이 늘어난다.
음… 이 함수는 이름만 보아서는 어떤 것을 하는지 모르겠네 좋아 리턴 값 부터 일단 먼저 확인 해봐야겠어 .좋아 date를 리턴하는군! 그래 이걸 가져다 쓰면 되겠어 그런데 잠시만 내 함수에서 계산을 해야되는데 이게 String으로 반환되는건가?
Typescript를 사용하기전 Javascript를 사용할때 내가 겪었던 문제들이며 Javascript를 사용할때 알 수 없는 에러로 Fuck Javascript!!!! 라고 소리쳤던 원인이기도 하다.
보다 자세하게 그렇다면 Typescript는 어떻게 코드를 읽기 쉽게 만드는지 살펴보도록 하자.
아래 예제는 전혀 실용적이지 않지만 실제로는 아주 복잡한 로직이라고 상상해주길 부탁한다.
먼저 지금 현재 달을 반환 하는 함수가 있다고 가정하자 나는 이를 통해 새로운 두달 뒤를 계산하려고 한다.
위의 코드의 결과 값이 예상이 되는가? 개발자는 현재 달이 2월이니 두달 뒤의 계산 값으로 4월이 나오길 기대한다.
하지만 결과 값은 ‘22’ 가 출력된다. 이는 getCurrentMonth의 return 값의 Type이 String이고 calculateTowMonthsLater 함수에서 계산될때 Javascript에서는
towMonthsLater = currentMonth + 2
위의 계산에서 2가 자동으로 String으로 형변환(Type Conversion)되기 때문이다
결과적으로 towMonthsLater = currentMonth + ‘2’ 로 되어 22가 되어 버리는 것이다.
이는 매우 간단한 예제로 실무에서는 이보다 훨씬 복잡하고 긴 코드가 된다고 생각해보면 위와 같은 일은 충분히 일어날 가능성이 다분하다
이제 Typescript 에서는 이를 어떻게 해결하는지 한번 살펴보도록 하자
: 뒤의 문자는 데이터 타입을 나타낸다. 위의 빨간줄이 보이는가? 코드를 작성하는 중에 위와 같이 에러에 대해 표시해주며 컴파일 조차 되지 않는다. 보다 자세한 에러 메세지는 아래와 같다.
결론적으로 이러한 것들이 개발에 어떠한 영향을 미치게 될지 생각해보자
- Typescript는 코드를 보다 읽기 쉽게 만든다.
- Typescript는 개발자의 실수를 줄여준다.
우선 첫번째의 경우 위의 예제에서 살펴 보았듯이 리턴 타입을 명시 함으로써 어떠한 데이터가 리턴 되는지 명확하게 알 수가 있다.
또한 함수를 사용할때도 위의 예제에 나와 있지는 않지만 함수에 어떤 인자를 넣어야 될지 타입을 지정할 수가 있어 이를 사용하는 개발자 입장에서는 보다 명확하게 함수의 사용방법을 알고 어떤 인자를 넣어야 될지 IDE 에서 이를 지원하기 때문에 편리하게 사용가능하다.
두번째의 경우 코드를 작성하는 중의 에러를 발견할 수 있기 때문에 보다 빠르게 에러에 대한 대응이 가능하며 예상치 못한 Side Effect를 줄일 수가 있다.
이외에도 Typescript를 이용함으로 얻는 이득이 많지만 나는 가장 중요한것이 위에 언급한 두가지라고 생각한다.
이는 깨끗한 코드(Clean Code)를 만드는데 기여를 한다고 볼 수 있는데 이에 대해 좀 더 자세한 사항들은 다른 주제에서 다루도록 하겠다.
결과적으로 Typescirpt를 사용함으로써 생산성이 증대되고 디버깅과 코드 읽는 시간이 줄어듬으로써 개발 속도 또한 향상된다고 말할 수 있을 것이다.
위의 두가지 사항만으로도 개발에서 Typescript를 활용할 가치는 충분하다고 본다.
