TypeScript 소개

자바스크립트를 공부하다 보면, 자연스럽게 타입스크립트(TypeScript)를 자주 접하게 됩니다. 타입스크립트 개념을 배우는 과정에서, 개별 시리즈에 게시물을 포스팅하는 방식으로 타입스크립트 공부를 정리해보고자 합니다.

본 게시물은 필자의 티스토리에 올린 글을 바탕으로 작성되었습니다.

What is TypeScript?

보통 타입스크립트를 검색해보면 "자바스크립트의 Superset"이라는 표현이 많이 나옵니다.

슈퍼셋이 무슨 말일까요? 슈퍼셋은 상위 확장, 내지는 상위 호환의 의미를 가지고 있습니다. 즉, 타입스크립트는 자바스크립트의 상위 호환격 개발 언어라고 볼 수도 있겠습니다.

바로 위쪽의 이미지처럼, 타입스크립트는 자바스크립트라는 언어를 포괄하는 슈퍼셋 언어이며, 따라서 자바스크립트와 대부분의 문법, 메커니즘 등을 공유합니다.

JavaScript가 뭐 어때서?

그렇다면 타입스크립트가 어떤 특징을 가지고 있길래 자바스크립트의 상위 확장이라고 불리는 걸까요? 이를 이해하기 위해서는 먼저 자바스크립트의 특징을 알아볼 필요가 있습니다.

우리는 자바스크립트를 다루면서 수많은 데이터 타입들을 다루게 됩니다. 그런데 이 데이터 타입들의 홍수를 자바스크립트가 받아들이는 방법은 조금 느슨합니다.

자바스크립트는 타입과 관련된 분석을 런타임 이전에는 하지 않습니다. 즉, 일단 실행되고 나서야 데이터 타입에 대한 분석과 검사를 진행한다는 이야기입니다.

이러한 특징 때문에, 자바스크립트는 약간의 "융통성"이 내장되어 있습니다.

function numCheck(num) {
 return num == 0;
}

numCheck(0)  // true
numCheck(false)  // true
numCheck("")  // true
numCheck([])  // true

위의 코드 블럭에서, 숫자 타입 0 뿐만 아니라, false(Boolean), 빈 문자열, 빈 배열 모두 true를 리턴한다는 것을 알 수 있습니다.

각각 false, 빈 문자열, 빈 배열 모두가 0의 값을 갖는다고 간주되면서 강제로 형 변환을 하기 때문이죠.

이처럼 런타임에 가서야 데이터 타입에 대한 정의와 검사가 이루어지기 때문에, 자바스크립트를 동적 타입 언어라고 부릅니다.

TypeScript가 해결해 줄꺼야

우리가 대규모 프로젝트를 진행중이라서 문서 내에 코드가 수십만 줄이 있다고 생각을 해봅시다.

그런데 자바스크립트가 스스로 융통성을 발휘해 데이터 타입을 바꾼다면? 정확히 어디서 그러한 동적 타이핑이 일어났는지 찾을 수 있을까요?

또한 개발자의 의도가 함수에 숫자를 넣는 것이었다면? 함수에 숫자가 아닌 다른 데이터 타입을 넣었음에도 자바스크립트의 특징으로 인해 그 어떤 케이스에서도 에러가 뜨지 않았습니다.

타입스크립트는 바로 이러한 문제점들을 해결하기 위해 2012년, 마이크로소프트에 의해 오픈 소스로 개발된 자바스크립트 대체 언어입니다.

정리하자면, 타입스크립트는 실행 이전 단계부터 타입 에러에 대한 가능성을 감지하고, 다른 정적 타입 언어처럼 데이터 타이핑을 엄격하게 관리하는 자바스크립트의 잘 나가는 형제라고 볼 수 있겠습니다.

TypeScript 사용하기

TypeScript 설치법

저는 npm을 통해 타입스크립트를 설치하였고, 따라서 npm을 통한 타입스크립트 설치법을 소개해 보겠습니다.

(당연하게도, Node.js, npm이 미리 설치되어 있어야 합니다.)

// local 설치
$ npm install typescript

// global 설치
$ npm install -g typescript

// 타입스크립트 버전 확인
$ tsc -v

설치가 필요한 디렉토리에서 터미널을 열고, 위 명령어들을 입력하시면 끝입니다.

이미지에서 확인할 수 있듯이 "tsc -v" 명령어를 통해 타입스크립트를 제대로 설치하였는지, 버전은 몇인지 확인할 수 있습니다. 저는 옛날에 찍어서 4.4.4 버전으로 나오네요.

$ npm i ts-node --save-dev

마지막으로 위 명령어를 입력하시면 됩니다. ts-node는 node.js 상에서 타입스크립트를 실행할 수 있게 해주는 패키지입니다.

(엄밀히 말하면, 실제로 타입스크립트 파일 자체를 node.js에서 실행시키는 것이 아니라 타입스크립트 파일을 자바스크립트 파일로 컴파일하여 실행시키는 것입니다.)

TypeScript 컴파일하기

타입스크립트 파일은 그 자체로 브라우저에서 실행 시킬 수 없습니다. 브라우저가 타입스크립트 파일 읽는 법을 모르거든요!

브라우저는 자바스크립트 파일만을 읽을 수 있기 때문에, 작성이 끝난 타입스크립트 파일은 자바스크립트 파일로 컴파일 하는 작업을 거쳐야 합니다.

타입스크립트 컴파일을 하기 위해서는 제일 먼저 tsconfig.json이라는 파일을 만들어야 합니다.

이 파일은 타입스크립트를 자바스크립트로 변환하는 과정에 필요한 각종 설정 사항들을 선언하는 파일입니다. 간략한 예시는 다음과 같습니다.

제가 타입스크립트 공부를 하면서 실제로 작성했었던 tsconfig 파일입니다.

tsconfig.json에 들어가는 옵션들은 대단히 방대해서, 하나하나 세세히 설명하면 글이 너무 길어질 것 같네요.

한국어로 된 타입스크립트 소개 페이지가 깃허브 상에 공개되어 있으니, 다음 링크에 접속해 필요하거나, 궁금한 옵션들을 검색해 보시는 것을 추천드립니다.

https://typescript-kr.github.io/pages/compiler-options.html

tsconfig.json을 만들어서 필요한 사항들을 설정한 후에, 터미널 상에서 컴파일 관련 명령어를 입력해주면 컴파일이 완료됩니다.

// 현재 파일에 대한 컴파일 실행
$ tsc

// 컴파일러 기본값으로 index.ts만 트랜스파일
$ tsc index.ts

// 기본 설정으로 src 폴더 안에 모든 ts 파일을 트랜스파일
$ tsc src/*.ts

// watch mode로 ts 컴파일 실행
$ tsc -w

기본 명령어는 tsc이며, tsconfig 파일과 상관없이 특정 파일만 컴파일 하고 싶으면 tsc + 파일명 형식으로 명령어를 입력하면 됩니다.

또한, tsc -w를 통해 tsc 파일을 실시간으로 컴파일하는 것도 가능하니 꼭 알아두세요.

타입스크립트는 문법에 아주 엄격하기 때문에, 어떤 이유로든 타입스크립트 파일에 에러가 있으면 정상적으로 자바스크립트 파일로 컴파일 되지 않습니다.

TypeScript 시리즈에 대하여

타입스크립트 공부를 시작하면서, 산뜻한 마음으로 타입스크립트를 소개하는 글을 작성해보았습니다.

정적 타입으로 문서를 작성하는 게 왜 좋은지 React를 다루면서 어느 정도 감을 잡았는데, 빨리 타입스크립트에 적응해서 React랑 같이 다뤄보고 싶습니다.