타입스크립트(TypeScript)는 마이크로소프트가 엔터프라이즈 규모의 애플리케이션을 구축하기 위한 툴로 자바스크립트를 개조하는 과정에서 개발됐다. 자바스크립트 구문과 강한 타입, 객체 지향 프로그래밍을 결합한 프로그래밍 언어로 큰 인기를 얻었다.

여기서는 타입스크립트의 개요를 시작으로 간략한 역사를 되짚고 자바스크립트와의 차이점과 유사점, 그리고 타입스크립트가 사용하기에 매력적인 언어인 이유를 살펴본다. 또한 타입스크립트 코드를 작성하는 방법을 배우기 위한 리소스도 안내한다.

타입스크립트란?

타입스크립트는 인기 있는 자바스크립트 프로그래밍 언어를 기반으로 기업 개발에 중요한 여러 기능을 추가한 변형이다. 특히 타입스크립트는 강한 타입(strongly typed)의 언어다. 즉, 프로그래머가 변수와 기타 데이터 구조를 문자열, 부울(boolean)과 같은 특정 타입으로 선언할 수 있으며, 타입스크립트는 그 값의 유효성을 검사한다. 느슨한 타입 언어인 자바스크립트에서는 불가능한 부분이다.

타입스크립트의 강한 타입은 엔터프라이즈 규모의 코드베이스를 다룰 때 개발자 효율성을 높여주는 다양한 기능을 가능하게 해준다. 타입스크립트는 자바스크립트와 같이 인터프리트되는 것이 아니라 컴파일되므로 실행 전에 오류를 포착할 수 있다. 백그라운드 증분 컴파일을 수행하는 IDE는 코딩 프로세스 중에 이런 오류를 잡아낸다.

자바스크립트와의 이 같은 중요한 차이에도 불구하고 타입스크립트는 자바스크립트를 실행할 수 있는 곳 어디에서나 실행이 가능하다. 타입스크립트는 바이너리 실행 파일이 아닌 표준 자바스크립트로 컴파일되기 때문이다.

타입스크립트 vs. 자바스크립트

타입스크립트는 자바스크립트의 상위 집합이다. 모든 올바른 자바스크립트 코드는 올바른 타입스크립트 코드이지만, 타입스크립트에는 자바스크립트에 없는 언어 특징도 있다.

가장 눈에 띄는 고유한 특징은 타입스크립트라는 이름의 기원이기도 한, 앞서 언급한 강한 타입이다. 타입스크립트 변수는 컴파일러에 어떤 종류의 데이터를 저장할 수 있는지 알려주는 문자열, 숫자, 부울과 같은 타입과 연결된다. 또한 타입스크립트는 타입 추론을 지원하며, catch-all any 타입, 즉 프로그래머가 변수의 타입을 명시적으로 할당하지 않아도 되는 타입을 포함한다.

타입스크립트는 자바스크립트와 달리 객체 지향 프로그래밍용으로 설계됐다. 자바스크립트에서 직관적이지 않은 상속, 액세스 제어와 같은 개념을 타입스크립트에서는 쉽게 구현할 수 있다. 또한 타입스크립트에서는 자바스크립트에서는 별 의미가 없는 개념인 인터페이스를 구현할 수 있다.

그렇기는 하지만, 타입스크립트로 코딩할 수 있는 기능은 자바스크립트에서도 모두 코딩이 가능하다. 타입스크립트의 컴파일 방식은 일반적인 의미의 컴파일(예를 들어 C++는 지정된 하드웨어에서 실행할 수 있는 바이너리 실행 파일로 컴파일됨)이 아니기 때문이다. 대신 타입스크립트 컴파일러는 타입스크립트 코드를 자바스크립트로 트랜스파일한다. 톱탈(Toptal) 블로그에서 기능적으로 동일한 타입스크립트와 자바스크립트를 비교한 다니엘 모네시의 글을 보면 차이점을 파악할 수 있을 것이다.

트랜스파일된 자바스크립트는 웹 브라우저부터 Node.js가 설치된 서버에 이르기까지 자바스크립트 코드를 실행할 수 있는 어디에서나 실행할 수 있다. 물론 여기서 한 가지 의문이 떠오른다. 타입스크립트가 결국 자바스크립트 코드를 생성하는 하나의 방법에 불과하다면, 굳이 사용할 이유가 무엇인가? 이 질문에 답하려면 타입스크립트가 어디에서 왔고 어디에 사용되는지를 살펴봐야 한다.

타입스크립트의 간략한 역사

타입스크립트는 마이크로소프트 내부에서 개발된 뒤 2012년 오픈소스로 출시됐다. 마이크로소프트가 여전히 이 프로젝트의 관리자이자 주 개발자 역할을 하고 있다. 2012년 ZD넷의 기사에 따르면, “마이크로소프트의 여러 팀에서 자바스크립트를 사용해 마이크로소프트 제품을 개발하고 유지하려고 시도했던 경험에서 타입스크립트가 나왔다.”

당시 마이크로소프트는 구글 지도(Google Maps)의 경쟁 상대로 빙 지도(Bing Maps)를 키우고 오피스 제품군의 웹 버전을 제공하려는 중이었고, 자바스크립트는 이런 작업을 위한 주 개발 언어였다. 그러나 작업은 말처럼 쉽지 않았다. 자바스크립트는 엄청나게 많은 틈새 분야로 확산했지만 원래는 인터랙티브 웹 디자인을 위해 개발됐으며, 작동하는 자바스크립트 코드를 쉽고 빠르게 작성할 수 있다는 점을 주요 장점으로 내세운다. 그러나 엔터프라이즈 소프트웨어 개발에서는 요구사항이 달랐다. 속도보다는 견고함과 유지보수의 편의성이 더 중요하다.

마이크로소프트 개발자들은 자바스크립트를 사용해서는 회사 플래그십 솔루션 규모의 애플리케이션을 작성하기가 어렵다는 사실을 알게 됐다. 그래서 자바스크립트 환경에서 실행되는 엔터프라이즈급 애플리케이션을 더 쉽게 구축하기 위한 목적으로 타입스크립트를 개발했다. 이것이 초기 타입스크립트 프로젝트 웹사이트에 있던 “확장되는 안전(Safety that scales)”이라는 구호가 탄생한 배경이다.

타입스크립트를 사용하는 이유

타입스크립트가 자바스크립트보다 더 나은 부분은 구체적으로 무엇일까?

가장 중요한 것은 타입스크립트가 객체 지향적이며, 강한 타입이라는 사실이다. 앞에서도 언급했지만 이는 대규모 개발팀에서 타입스크립트가 가진 가치의 핵심이다. 개발자는 다른 사람이 작성한 타입스크립트 코드를 보고 함수가 어떤 매개변수를 기대하는지, 무엇을 반환하는지, 그리고 API 엔드포인트와 데이터베이스 쿼리에서 코드가 어떤 종류의 데이터를 가져오는지를 쉽게 파악할 수 있다. 자신만의 맞춤형 타입, 클래스, 인터페이스를 만들면 데이터 처리와 일관성을 제대로 수행하기가 훨씬 더 쉬워진다.

또 다른 이점은 자바스크립트와 달리 IDE가 타입스크립트 개발 속도를 대폭 높여줄 수 있다는 점이다. 타입스크립트는 객체 지향적이고 강한 타입이라는 속성 덕분에 기업 개발자가 IDE에서 기대하는 많은 생산성 향상 효과를 얻을 수 있다. IDE는 타입스크립트 객체(직접 작성하는 객체와 서드파티 라이브러리의 객체 모두)의 구조를 일 수 있으므로 더 쉽게 텍스트를 자동 완성하거나 안내를 위한 팝업 메뉴를 제공할 수 있다. 또한 대부분 IDE는 타입스크립트 코드를 즉석에서 트랜스파일할 수 있으므로 코드 작성 과정에서 오류를 지속적으로 확인하는 데 도움이 된다.

타입스크립트가 여전히 (대부분) 자바스크립트라는 점도 중요하다. 지금까지 자바스크립트가 기업 개발 작업에 그다지 적합하지 않은 이유에 대해 이야기했다. 그런데 애초부터 기업 개발을 위해 설계된 자바나 닷넷 또는 다른 플랫폼이 아닌 타입스크립트를 선택할 만한 이유는 무엇일까? 자바스크립트에도 많은 이점이 있다. 자바스크립트 코드는 빠르게 작성하기 쉽고 어디에서나 실행된다. 또한 자바스크립트 엔진은 3대 브라우저 업체의 투자를 받은 만큼 대체로 실행 속도가 상당히 빠르다. 타입스크립트는 일반 자바스크립트 코드로 트랜스파일되므로 자바스크립트가 가진 모든 이식성과 성능상의 이점을 똑같이 제공한다.

타입스크립트는 코드베이스용으로 이미 자바스크립트에 투자했지만 이 코드베이스를 더 쉽게 유지보수하고 확장하고자 하는 기업에 특히 매력적이다. 유효한 자바스크립트는 곧 유효한 타입스크립트이므로 모든 것을 처음부터 다시 새 언어로 작성할 필요 없이 기존 자바스크립트 코드에 점진적으로 타입스크립트 기능을 추가할 수 있다. 베카니 쿠말로의 블로그에서 이를 수행하는 방법에 대한 좋은 글을 볼 수 있다. 또한 두 언어가 유사한 만큼 현재 자바스크립트 개발자라면 빠르게 타입스크립트를 익힐 수 있다.

타입스크립트에는 또 다른 유용한 트릭이 있다. 컴파일러 타겟을 특정 자바스크립트 런타임 환경, 브라우저 또는 언어 버전으로 설정할 수 있다. 올바른 형식의 자바스크립트 코드는 타입스크립트 코드이기도 하므로, 예를 들어 첨단 또는 실험적 언어 기능이 포함될 수도 있는 최신 버전의 ECMA스크립트 사양으로 작성된 코드를 가져와서 이 언어의 레거시 버전과 호환되는 자바스크립트 코드로 트랜스파일할 수 있다.

타입스크립트 설치 방법

타입스크립트를 사용할 준비가 되었는가? 설치는 쉽다. 개발용 컴퓨터에서 이미 Node.js를 사용 중이라면 NPM(Node.js 패키지 관리자)을 사용해 설치할 수 있다. 프로그래머를 위한 타입스크립트 공식 자습서에서 이 과정에 대한 안내를 볼 수 있다.

원하는 IDE에 플러그인으로 타입스크립트를 설치할 수도 있다. 이렇게 하면 앞서 이야기한 툴 측면의 장점이 있고, 타입스크립트를 자바스크립트로 컴파일하는 프로세스도 처리할 수 있다.

타입스크립트는 마이크로소프트에서 개발했으므로 당연히 비주얼 스튜디오와 비주얼 스튜디오 코드를 위한 고품질 플러그인이 있다. 그러나 타입스크립트는 오픈소스 프로젝트로서 이클립스와 같은 오픈소스 IDE부터 빔(Vim)과 같은 전통의 텍스트 편집기에 이르기까지 모든 곳에 적용됐다. 깃허브에서 전체 프로젝트를 탐색하고 다운로드할 수 있다.

타입스크립트 튜토리얼

더 자세히 알아볼 준비가 되었다면, 다음 튜토리얼을 통해 속도를 높여 보자.

• 타입스크립트 공식 입문 튜토리얼인 “자바스크립트 프로그래머를 위한 타입스크립트(TypeScript for JavaScript Programmers)”는 타입스크립트를 처음 접하는 사용자를 위한 가이드다. 설치 과정부터 자세하게 안내한다.
• 매트 포콕의 “초보자용 타입스크립트 튜토리얼(Beginner’s TypeScript Tutorial)”은 초보자를 위한 더 상세한 튜토리얼로, 자바스크립트에 익숙하다는 전제하에 진행된다.
• 이 비주얼 스튜디오 코드 튜토리얼은 IDE가 타입스크립트 개발 생산성을 어떻게 높이는지 보여준다.
• “초보자를 위한 타입스크립트 튜토리얼: 누락된 가이드(TypeScript Tutorial for Beginners: The Missing Guide)”는 자바스크립트 경험이 제한적이어도 유용한 철저한 입문 가이드다.
• 리액트 프레임워크와 타입스트립트를 함께 사용하려면 실전 리액트 튜토리얼이 적합하다.
• 배터 스택(Better Stack)은 타입스크립트를 Node.js 프레임워크와 함께 사용하는 방법에 대한 좋은 입문 자료를 제공한다. 참고로 Node.js는 이제 자바스트립트로 변환하지 않고 타입스크립트로 작성된 코드를 직접 지원하기 시작했다.

dl-itworldkorea@foundryco.com