📘 TypeScript 소개 & 개발 환경 구성하기

타입스크립트 소개

자바스크립트는 동적 타입 언어로서 자유도가 높아 진입 장벽이 낮고 생산성이 높은 대신, 형식이 정해져 있지 않기 때문에 오류(버그)가 런타임 중에 발생한다거나, 또는 팀원간에 코드를 통한 의사소통에 어려움이 생긴다는 단점이 있다.

예를들어 자바스크립트는 다음과 같은 정신 나간 코드에 대해서 어떠한 오류 없이 스스로 판단해 결과를 만들어 버린다.

자바스크립트는 최대한 개발자의 실수에 대해서 오류를 자제하고 실행하도록 유도하여 위와 같은 결과가 나오는 것이다. 이는 생산성을 확대라는 장점이 있지만 의도치 않는 버그를 마구 내뿜는다는 아주 큰 단점이 생기게 된다.

C#과 Java 같은 체계적이고 정제된 언어들에서 사용하는 강한 타입 시스템은 높은 가독성과 코드 품질 등을 제공할 수 있고 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류들을 더욱더 쉽게 잡아내어 버그에 대해 미리 방지할수 있다.

마찬가지로, 타입스크립트는 변수와 데이터의 종류를 명확히 지정해주기 때문에 이런 단점들이 보완될 수 있는 것이다. 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있다.

Typescript의 컴파일은 거의 같은 수준의 추상화가 되는 것이기 때문에 엄밀히 말하면 트랜스파일이 맞다. 하지만 대부분 한 언어로 작성된 코드를 다른 언어로 옮기는 일을 통칭하여 컴파일이라 부르기에 (컴파일 ⊃ 트랜스파일) 편의상 부른다고 보면 된다.
컴파일과 트랜스파일 차이점은 간단하게 알아보고 싶다면 이 글 을 참고하길 바란다.

다음과 같은 자바스크립트 코드 에러를 봐보자. nico 객체에 hello() 라는 메소드가 없기 때문에 나타나는 에러이다.

자바스크립트도 정상적으로 에러를 내뿜는데 뭐가 문제냐 일수도 있겠지만, 핵심은 언제 에러를 내뿜는가 이다. 위의 자바스크립트는 nico.hello() 라는 잘못된 코드를 실행시킨 결과 에러가 난 것이다. 이 말은 코드를 실행시키기 전까지 코드에 잘못된 코드가 있는지 알수가 없다는 말이다.

하지만 타입스크립트에서 위의 코드를 그대로 써주면, 코드를 실행하기 전에 코드 편집기 자체에서 미리 에러 글씨를 띄워 개발자한테 경고를 한다. 이것이 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있다는 뜻이다.

자바스크립트가 .js 확장자를 가진 파일로 작성되는 것과 같이 타입스크립트는 .ts 확장자를 가진 파일로 작성되고, 작성 후 타입스크립트 컴파일러를 통해 자바스크립트 파일로 컴파일하여 사용하게 되는 형태이다. 그리고 컴파일된 자바스크립트 코드가 브라우저나 node.js 등의 런타임에서 구동되게 된다. 따라서 타입스크립트는 프로그래밍 언어이자 컴파일러 역할도 한다고 할 수 있다. 

타입스크립트는 자바스크립트의 라이브러리 이자 또다른 독자적인 언어이기도 하다. 보통 C나 JAVA 같은경우 컴파일이 엔진에 의해서 이루어지지만, 타입스크립트는 컴파일이 라이브러리에 의해 이루어지기 때문에 컴파일 속도나 굉장히 느리다는 단점을 가지고 있다. 그래도 10일 만에 뚝딱 개발한 스크립트 언어에 컴파일이라는 개념을 넣는다는 점은 혁명을 일으킨 건 사실이다.

---

타입스크립트 개발 환경 구성

 

타입스크립트 온라인 에디터

로컬 환경 구성이 당장 어렵다면, 간단한 타입스크립트 코드 연습은 온라인 에디터에서도 가능하다.

TS Playground - An online editor for exploring TypeScript and JavaScript

---

타입스크립트 컴파일러 설치

이제 본격적으로 타입스크립트를 설치해서 사용해보자.

노드 패키지를 설치하는 것처럼 typescript를 글로벌로 설치해둔다. (버전을 명시하고 싶다면 뒤에 @을 붙인다)

> npm i -g typescript

> npm install -g typescript@2.7.2 # 버전 명시

그리고 확장자 .ts 파일을 하나 만들어서 다음과 같이 코딩한다.

const message: string = 'Hello World';
console.log(message);

터미널을 열고 해당 타입스크립트 파일이 있는 경로에 가서 다음 컴파일 명령어 tsc (type script compile)를 실행해준다.

그러면 ts 파일이 js 파일로 변환 되는 것을 볼 수 있다.

> tsc index.ts

그리고 컴파일된 자바스크립트 파일을 node로 실행해주면, 마치 타입스크립트를 실행한 결과를 얻을수 있게 된다.

⚠️ 타입스크립트 컴파일 주의 할점 

타입스크립트를 자바스크립트로 컴파일 하는데 있어 많이들 착각하는 점이 타입스크립트에 에러가 있으면 컴파일이 안된다는 생각하는 것이다. 왜냐하면 C나 JAVA에서는 그래왔기 때문이다. 그러나 확실히 알아두어야 할 점은 타입스크립트 에러 타입 검사와 컴파일은 별개로 작동한다는 점이다. 그래서 타입스크립트 문법에 에러가 있음에도 tsc 명령어를 실행해보면 문제없이 자바스크립트로 변환되는걸 볼 수 있다. 물론 그 자바스크립트는 돌아가지 않는다.

---

TS-Node 설치

우리는 지금까지 노드 프로젝트에서 단일 js 파일을 터미널에서 실행할때 node index.js 명령어를 통해 실행해왔었다. 하지만 타입스크립트 파일을 node index.ts 명령어로 실행해보면 에러가 나고 실행이 안된다. 그래서 위의 ts 파일을 js 파일로 tsc 명령어를 통해 컴파일 한뒤 js 파일을 node 명령어로 실행했다. 그러나 배포 상황이 아닌 개발 단계에서 이렇게 타입스크립트 코드를 테스트/실행하기 위해 일일히 컴파일 하기에는 번거롭고 귀찮다.

node를 설치해서 node index.js 로 자바스크립트를 바로 실행했던 것처럼, ts-node를 설치하면 ts-node index.ts 명령어로 타입스크립트를 컴파일 단계없이 바로 코드를 실행할 수 있게 된다.

ts-node는 JIT(Just In Time)을 통해서 precomile 없이 타입스크립트 파일을 콘솔환경에서 node와 같이 실행하기
 위한 패키지이다.

> npm install -g ts-node

> ts-node index.ts

 

ts-node-dev 사용해보기

ts-node로 곧바로 타입스크립트 파일을 실행해 테스트해보았지만, 여전히 배포를 하기위해서는 따로 자바스크립트로 컴파일을 해줘야 해서, 따로 tsc 명령어를 이용해 js로 변환해주어야 했다. 이 역시 번거롭다.

이러한 귀차니즘으로 탄생한게 ts-node-dev 패키지이다. ts-node-dev 는 ts-node 와 node-dev 를 합본팩 이다. 타입스크립트를 개발할때의 편의성에 중점적으로 특화되어 있다고 보면 된다.

node-dev 는 nodemon 과 같이 watch(실시간 동작) 와 관련된 모듈이다.

> npm install -g ts-node-dev

> ts-node-dev --respawn --transpile-only index.ts

ts-node-dev로 실행하게 되면, ts-node 같이 곧바로 타입스크립트 파일을 실행해 결과값을 보여주며, 또한 실시간으로 바로 자바스크립트로 컴파일 해주는걸 볼 수 있다.

이를 응용해 package.json 내의 scripts 항목에 npm 스크립트로 등록해서 개발환경을 구성할 수 있다.

예를 들어 다음과 같이 각 환경마다 스크립트를 등록해 사용할 수도 있다.

"scripts": {
   // 전체 ts 파일들을 컴파일
   "build": "tsc", 

   // 실시간 ts 컴파일
   "build:watch": "tsc -w", 

   // nodemon 실행
   // --watch src/ : src 폴더안에 변화가 있으면 감지해서 재시작함
   // --exec ts-node : ts파일을 nodemon으로 실행시킬 수 있게함
   "dev": "NODE_ENV=dev nodemon --watch src/ --delay 500ms --exec ts-node src/start.ts", 

   // ts-node-dev 실행
   // dev 환경에서 ts파일로 서버 실행
   "start:dev": "NODE_ENV=dev ts-node-dev --respawn --transpile-only src/start.ts",

   // ts를 빌드한 js file로 node 서버 시작
   "start": "NODE_ENV=production node build/start.js"
}

윈도우 사용자는 cross-env를 사용하여 환경 변수를 설정할 수 있다.

---

타입스크립트 컴파일 설정

위에서 ts-node 명령어를 실행했을때 뒤에 옵션을 줬었다. 이 옵션들을 마치 package.json 처럼 tsconfig.json 파일에서 한번에 관리하여 컴파일 설정을 할 수 있는데, 이에 대한 내용은 다음 포스팅을 참고하길 바란다.

[TS] 📘 타입스크립트 컴파일 설정 - tsconfig 옵션 정리

---

타입스크립트 코딩을 편하게 하는 VSCode 익스텐션 추천

타입스크립트의 대표적인 에디터로는 IntelliJ, WebStorm 등이 있지만 이들은 유료라 공부하기에는 알맞지 않다. 따라서 타입스크립트를 개발한 마이크로소프트에서 무상으로 제공해주 VSCode 에디터를 이용하면 추가 지출없이 타입스크립트 코딩을 할 수 있다. 하지만 무료 에디터만큼 지원 기능이 약간 빈약한데 이를 해결해주는 확장팩을 다음 포스팅에서 소개해 본다.

[VSCode] 💽 TypeScript 코딩하는데 유용한 확장팩 💯 추천

---

@types 라이브러리

타입스크립트는 자바스크립트를 포함하는 관계이다. 그러면 기존의 자바스크립트 라이브러리(jQuery, lodash, react 등)을 타입스크립트에서 쓸수 있을까?

가능하다. 다만 우리가 ts 파일에 생 자바스크립트 코드를 쓰면 빨간줄이 뜨듯이, 각 라이브러리 함수 기능에 대한 타입이 정의 되어 있어야 사용할 수 있다.

예를 들어 아래와 같은 lodash 라이브러리 함수 코드는 타입스크립트에서 제대로 동작하지 않는다.

import { isEqual } from 'lodash';

var object = { 'a': 1 };
var other = { 'a': 1 };

isEqual(object, other); // true

그 이유는 lodash 라이브러리의 내부 코드에 대한 타입이 정의되어 있지 않아 이 라이브러리를 들고 와서 사용할 때 타입스크립트 파일에서 타입 추론을 할 수 없기 때문이다.

 

이런 경우에는 @types 라는 타입스크립트 추론이 가능한 보조 라이브러리를 설치하면 된다. jQuery나 React와 같이 대중적으로 사용되는 JS 라이브러리는 별도로 @types/라이브러리명 별칭으로 제공한다.

이 보조 라이브러리에는 필요한 각 코드에 대한 타입들이 정의된 .d.ts 파일들이 들어있다. 기존에는 JS방식으로 돌아가던 라이브러리를 TS환경에서 사용하게 되는 경우 타입체킹에 필요한 타입들을 불러와야 하기 때문에 이런 추가적인 타입 선언 모듈을 받아서 동작시키는 것이다.

lodash 자바스크립트 라이브러리를 예로 들자면, 아래 사이트에서 lodash를 검색해보면, @types/lodash 라는 모듈을 찾을 수 있을 것이다.

Search for typed packages

다음과 같이 @types/라이브러리명 을 npm으로 다운로드 해주면, Node.js의 Type들을 쓸 수 있도록 해준다.(www.npmjs.com/package/@types/node)

> npm i @types/lodash

 

.d.ts 파일 이란?

@types 라이브러리를 npm 을 통해 설치를 하면, node_modules 폴더에, 라이브러리 폴더 외에 @types 라는 폴더가 생기게 된다. 그리고 위 사진에서도 보듯이, @types 폴더안에는 수많은 .d.ts 파일들이 들어 있는걸 볼 수 있다.

.d.ts 파일은 기존 JS 모듈을 타입스크립트에서 사용하기 용이하도록 기존 JS 모듈의 타입정보를 별도의 파일로 따로 선언한 것들이다. 기본적으로 JS 기반의 라이브러리들은 TS 환경에서 타입이 지정되지 않았기 때문에, 타입체킹이 되지 않아서 라이브러리 코드를 인식되지 못하는 문제가 발생하게 되는데, 이 .d.ts 파일을 통해 해결하는 것이다.

보통 타입스크립트 프로젝트에서는 별도의 JS환경을 생각하지 않으므로 그냥 .ts파일 내부에 타입을 선언하지만, 라이브러리 같은 경우 JS환경을 생각하여 따로 .d.ts파일에서 분리해 타입을 관리한다고 한다.

---

타입스크립트 auto import 하는 법

간단한 편리한 팁이 있어서 소개해본다. 처음부터 import 구문을 쓰지말고, 당장 지금 사용에 필요한 라이브러리 함수명을 쓰면, 빨간줄이 뜨면서 옆에 파란 전구가 뜨게 되는데, 이 파란 전구를 클릭하거나 ctrl + . 단축키를 통해 auto import 를 할수 있다.

---

# 참고자료

https://nomadcoders.co/typescript-for-beginners

https://www.typescripttutorial.net/typescript-tutorial/what-is-typescript/

https://ssocoit.tistory.com/253