왜 타입스크립트를 쓸까?

March 29, 2021

• TypeScript, Flow 등 JS 정적 타이핑 툴 경험

웹 프론트엔드 채용 공고들을 보면 종종 위와 같이 타입스크립트에 대한 경험을 필요로 하는 경우가 존재한다. 그래서 한번 타입스크립트의 특징과 필요성에 대한 정리가 필요한 것 같아 이번 포스트를 쓰게 되었다. 사실 놀랍게도 나는 타입스크립트를 써본적이 있다. 물론 알고쓴게 아니고, 자바스크립트도 모르는 채로 타입스크립트를 썼었는데, 내 생애 첫 앱 개발 프로젝트가 아이오닉 프레임워크를 사용하여 하이브리드 앱을 개발하는 거였는데, 아이오닉이 TS기반이었기 때문에 자연스럽게 타입스크립트를 사용했다. 하지만 지금 생각해보면 정말 아무것도 모르는 채로 썼던 것 같다. (타입을 정할 수 있어도 any타입을 남용했던 기억이 난다.)

지금 단순히 타입스크립트에 대해 알고 있는 것을 떠올리면 자바스크립트의 경우 동적 타입 언어인 반면 타입스크립트는 정적 타입 언어이고, 그렇기 때문에 자바스크립트에 비해서는 에러나 디버깅에서 조금 더 명확하다(?)라고 어렴풋이 알고 있다. 그리고 타입스크립트 코드에는 타입을 명시해주는 인터페이스(?)와 같은 것들을 정해놓고 쓰는 것을 슬쩍 본 기억이 난다. 지금은 잘 모르지만 타입스크립트라는 언어의 특징과 왜 필요한지에 대해 아는 것이 중요하기 때문에 이번 기회에 알아가보자!

타입스크립트(Typescript)의 등장 (두둥)

타입스크립트는 자바스크립트의 슈퍼셋인 언어로 2012년 오픈소스 언어로 처음 등장하였다. 무려 마이크로소프트에서 개발, 유지하고 있는 언어이다. 초기에 설계될 당시, 자바스크립트 엔진을 사용하여 큰 규모의 애플리케이션을 만들 수 있도록 설계되었다. 자바스크립트의 슈퍼셋 언어이기 때문에 당연히 자바스크립트로 작성된 프로그램도 타입스크립트에서 동작한다. 실제로 타입을 정해서 타입스크립트로 프로그래밍한 것이 결국은 자바스크립트로 컴파일 된다. 컴파일시 시간이 좀 더 걸리더라도 안정성을 제공한다. 간단히 말하면 자바스크립트가 가지고 있는 모든 기능을 가지고 있으면서 +@인 느낌이다. 그렇기 때문에 자바스크립트와의 차이점이라는 것보다는 타입스크립트에서 추가된 특징에 대해 살펴본다는게 맞는 표현인 것 같다.

아래 사진은 타입스크립트의 trends라고 볼 수 있는데, 우상향 하고 있는 것을 볼 수 있다.

타입스크립트(Typescript)의 특징

• 기존 자바스크립트의 문법을 그대로 사용할 수 있다.
• 자바스크립트는 클라이언트 사이드의 스크립팅 언어인데 반해서 타입스크립트는 객체지향 컴파일 언어이다.
• 타입스크립트는 자바스크립트에 정적 타입, 클래서, 모듈을 더한 JS의 강화 버전이다.
• 마이크로소프트가 개발, 유지하여 지원적인 면에서 든든하다! (그렇기 때문에 대부분의 IDE에서 모두 지원된다.)

정적 타입

자바스크립트는 약 타입언어로 실행 중간에도 타입이 동적으로 변하기 때문에 중간 중간에 에러를 예측하기 어려운 문제를 안고 있었다. 하지만 타입스크립트에는 정적 타입을 추가하여 에러 체크와 자동 완성 등을 지원하여 개발자로 하여금 더 나은 코드 퀄리티와 여러 편의성, 그리고 안정성을 제공한다. 그리고 이 타입체크는 컴파일 과정에서 이루어진다.

아래 예시를 보면 자바스크립트와 같은 경우, 타입에 상관없이 결과를 출력한다. 이것이 개발자의 의도는 숫자 두 개를 더하는 것이어도, 자바스크립트는 동적 타이핑 언어이기 때문에 문제없이 실행한다.

function sum(a, b) {
  return a + b
}

sum('x', 'y') // 'xy'

타입스크립트의 경우를 살펴보자. 아래와 같이 인자들의 타입을 명시할 수 있기 때문에 아래와 같이 문자를 인자로 전달했을 경우 에러가 발생하는 것을 볼 수 있다. 이것은 곧 개발자의 의도를 조금 더 정확히 반영해줄 수 있게하는 수단이라고 할 수 있다. 뿐만 아니라 코드의 가독성을 높히고, 디버깅에도 유리하게 한다.

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

sum('x', 'y')
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

클래스의 확장된 기능

타입스크립트는 기존 자바스크립트의 클래스에서 더 확장된 인터페이스와 제네릭과 같은 기능을 지원한다. 이를 통해 더 완전한 객체지향 프로그래밍(OODP)를 제공한다. class, interface, extends처럼 전통적인 객체지향 언어에서 사용하던 키워드들을 그대로 사용할 수 있어, 기존 개발자들에게 더 친숙하게 여겨질 수 있다.

타입스크립트는 생산성을 낮춘다 ?!

타입 체크 등 여러가지 기능을 제공하는 만큼 자바스크립트의 비해 가독성이 떨어지고, 코드 량이 방대해 질 수 있기 때문에 이것이 단점으로 생산성이 낮아진다는 지적이 있을 수 있다. 하지만 결국 유지보수의 측면에서 보면 오히려 생산성을 증가시키는 결과를 가져 올 수 있다. 하지만 이것은 프로젝트 규모에 따라 다른 부분이며 정답이 정해져 있는 것은 아니다.

참고 글

1. 타입스크립트 핸드북 한글문서
2. TypeScript의 소개와 개발 환경 구축