타입스크립트(TypeScript)란?
자바스크립트(JavaScript)
자바스크립트는 모질라 재단에서 개발한 프로토타입 기반의 스크립트 언어입니다. HTML, CSS와 함께 웹을 구성하는 요소중 하나입니다. HTML이 웹페이지의 구조를 정의하고 CSS가 웹페이지를 디자인 한다면 자바스크립트는 클라이언트 단에서 웹페이지가 동적으로 동작하도록 합니다.
HTML5가 등장하기 이전에 웹 애플리케이션(Web Application)은 어도비 플래시(Adobe Flash)나 마이크로소프트 실버라이트(Microsoft Silverlight), 마이크로소프트 액티브X(Microsoft ActiveX) 등의 외부 플러그인에 의존했습니다.
그러나 HTML5의 등장 이후 플러그인의 기능이 자바스크립트로 구현가능해졌고, AJAX의 활성화로 SPA(Single Page Application)가 대세가 되었습니다.
또한 예전에는 웹브라우저의 인터프리터에 의해 클라이언트 단에서만 동작했지만 Node.js가 등장하면서 서버 단에서도 런타임 환경에서 동작이 가능해졌습니다.
타입스크립트(TypeScript)
타입스크립트는 마이크로소프트에서 구현한 자바스크립트 슈퍼셋 프로그래밍 언어입니다. 즉, 자바스크립트 문법에 타입스크립트 문법을 추가한 언어입니다. 이때문에 올바르게 작성된 자바스크립트 코드는 타입스크립트 코드로 사용가능합니다.
자바스크립트가 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있는 반면 타입스크립트는 정적 타입의 컴파일 언어로 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 컴파일해야합니다. 즉, 타입스크립트는 변수나 함수에 타입을 명시하여 사전에 오류를 발견하여 자바스크립트 개발의 생산성을 높일 수 있습니다.
타입스크립트는 2020년 스택 오버플로(Stack Overflow)에서 전세계 6만 5천 명의 개발자를 대상으로 실시한 설문조사에서 개발자가 가장 좋아하고 관심을 가지는 프로그래밍 언어 2위에 오를 정도로 인기있는 언어입니다. 요즘은 대형 SI 프로젝트에서 흔하게 사용되고 있으며, 개발자 구인 시 자바스크립트보다 타입스크립트를 우대기술로 언급하고 있습니다.
타입스크립트 사용 이유
에러를 사전에 발견
앞서 설명했듯이 타입스크립트는 코드를 컴파일을 필요로 정적인 언어이며, 타입을 명시하기때문에 사전에 에러를 검출하는 것이 가능합니다.
function sum(a, b) {
return a + b;
}
sum('1', '2'); // '12'
위의 덧셈 함수는 1 + 2를 의도했을테지만, 자바스크립트의 경우 타입이 명시적이지 않기 때문에 동적 타이핑(Dynamic Typing)에 의하여 숫자 3이 아닌 문자열 '12'를 출력합니다.
즉, 개발자가 의도하지 않은 값이 나올 수 있으며 디버깅이 어렵게 됩니다.
function sum(a: number, b: number) {
return a + b;
}
sum('1', '2'); // error TS2345: Argument of type '"1"' is not assignable to parameter of type 'number'.
반면 타입스크립트의 경우 타입을 number라고 명시했기때문에 문자열이 들어간다면 컴파일 단계에서 사전에 오류를 포착할 수 있습니다. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 기술하여 코드 가독성을 높이고 디버깅을 쉽게 할 수 있도록 합니다.
도구의 지원
타입스크립트는 IDE를 포함한 다양한 도구의 지원을 받을 수 있습니다. Visual Studio Code의 경우 툴의 내부가 타입스크립트로 작성되어 있기 때문에 타입스크립트 개발에 최적화 되어 있습니다.
변수 a의 타입은 number 이므로 toLocaleString 함수를 사용가능합니다. 자바스크립트의 경우 함수명을 직접 입력해야 하지만, 타입스크립트는 스니펫을 통해 빠른 코드 작성이 가능합니다.
자바스크립트 호환
타입스크립트는 자바스크립트의 슈퍼셋 언어이므로 자바스크립트와 100% 호환됩니다. 따라서 자바스크립트로 작성된 코드를 쉽게 타입스크립트로 변환할 수 있습니다.
개발환경 구축
우분투 20.04 LTS 버전을 기준으로 타입스크립트 개발환경을 구축해 보겠습니다.
작업공간(work space) 만들기
프로젝트를 위한 작업공간을 하나 생성합시다.
~$ mkdir -p ws/typescript && cd ws/typescript
nodejs 설치
apt를 통해 nodejs와 npm을 설치합니다.
~/ws/typescript$ sudo apt update && sudo apt upgrade && sudo apt install nodejs npm
nodejs의 여러버전을 관리하고 싶다면 nvm을 통해 설치할 수도 있습니다.
NVM GitHub에서 버전을 확인후 설치해주세요.
~/ws/typescript$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
설치후 다음 명령어를 입력하여 NVM을 활성화 시킵니다.
~/ws/typescript$ source ~/.bashrc
nodejs 설치는 다음과 같습니다.
$ nvm install node # 최신 버전 설치
$ nvm install --lts # 최신 LTS 버전 설치
$ nvm install 16.14.0 # 특정 버전 설치
$ nvm install 16 # 특정 버전 16의 최신 릴리즈 설치
typescript 설치
npm을 통해 타입스크립트를 전역으로 설치합니다. nodejs와 npm이 설치되어있어야 합니다.
~/ws/typescript$ sudo npm i -g typescript
설치가 되었는지 확인하기 위해 다음 명령어를 입력합니다.
~/ws/typescript$ tsc -v
프로젝트 내에서만 타입스크립트를 설치하고 싶다면 다음과 같이 명령어를 입력합니다.
~/ws/typescript$ npm i typescript -D
~/ws/typescript$ npx tsc -v
타입스크립트 파일 코드 작성
타입스크립트의 확장자는 .ts입니다. app.ts 파일을 생성후 에디터로 엽니다.
~/ws/typescript$ touch app.ts && nano app.ts
다음 예제 코드를 작성하세요.
const message: string = 'hello world';
console.log(message);
컴파일(Compile)
코드를 저장하고 다음 명령어를 입력하여 컴파일합니다.
~/ws/typescript$ tsc app.ts
컴파일이 완료되면 자바스크립트 파일(app.js)이 생성됩니다.
var message = 'hello world';
console.log(message);
자동으로 컴파일하고 싶다면 --watch 또는 -w 옵션을 주면 됩니다.
설정파일 : tsconfig.json
컴파일시 명령어를 통해 여러 옵션을 줄 수 있습니다.
~$ tsc app.ts --strict true --target ES6 --lib ES2015,DOM --module CommonJS
옵션 명령어 뿐만 아니라 tsconfig.json 파일을 통해서도 옵션을 줄 수 있습니다. 다음 명령어를 통해 default 설정파일을 생성할 수 있습니다.
~$ tsc --init