[TypeScript] 타입스크립트 설치 및 컴파일러 세팅하기

타입스크립트란?

요즘 신입 프론트엔드 개발자 채용 공고를 보면, 우대사항 혹은 기본 자격사항으로 까지 타입스크립트를 할 줄 아는 사람을 뽑는 기업들이 많아지고 있다. 도대체 타입스크립트란 무엇이며, 현재 개발자들에게 인기가 많은 이유는 무엇일까?

 

(자바스크립트를 공부한 사람들은 알 것이다. 자바스크립트가 얼마나 지X맞은 언어인지..)

Node.js의 등장으로 자바스크립트 언어를 다양한 플랫폼에서 사용할 수 있게 되었으며, 이로 인해 자바스크립트의 사용 범위가 확대되었지만, 동시에 자바스크립트의 한계점도 함께 부각되었다. 애플리케이션의 안정성을 고려할 때, 자바스크립트는 어느 정도 엄격성이 필요하게 되었고, 이러한 요구들에 의해 여러 가지 대안을 갖추게 되는데 이것이 바로 오늘날 타입스크립트가 되었다.

 

즉, 타입스크립트란 자바스크립트를 조금 더 안정적으로 사용할 수 있도록 '타입'이라는 안전장치를 추가한 언어라고 할 수 있다.

 

타입을 씀으로써 안전해지는 이유

let a = 'abcde';
a = 12345; // 문자에서 숫자로 타입을 변경
a.toUpperCase(); // 오류 발생!

우리가 코딩을 하다 보면, 하나의 변수에 새로운 값을 할당하는 경우가 있다. 자바스크립트의 경우 따로 변수에 타입을 지정하지 않기 때문에 문자열이었던 변수가 숫자가 될 수도 있고, 배열이나 객체가 될 수도 있다.

 

위의 예시 코드를 보면, 변수 a는 문자열이었다가 숫자가 되었고 문자열 메서드인 toUpperCase()에서 오류가 발생하였다.

여기에서 문제는 결국 코드가 실행은 된다는 점이다. 오류가 발생하지 못하도록 충분한 검사 후 실행하지 못하도록 했어야 했다. 만약, 변수 a는 문자열 타입만 들어오도록 미리 정해져 있었다면 오류 발생을 미리 막을 수 있지 않았을까?

 

타입스크립트의 동작 원리

(출처 - 한 입 크기로 잘라먹는 타입스크립트)

타입스크립트는 우선적으로 자바스크립트로 컴파일을 하는 과정을 거친다. 이때, 한 번에 자바스크립트로 컴파일되는 게 아닌 AST로 먼저 변환된다. 그 후 타입에 대한 오류가 없는지 검사를 하고 오류가 있다면 컴파일을 중단시킨다. 애초에 타입에 대한 오류가 생기면 자바스크립트로 변환조차도 되지 않는다.

 

타입스크립트 실행하기

npm i @types/node

우선 타입스크립트를 사용하기 위해서는 가장 기본적으로 @types/node 패키지를 설치해줘야 한다.

npm i -g typescript
tsc -v // 버전 확인

다음으로는 타입스크립트 컴파일러를 설치해 준다. 브라우저는 타입스크립트를 못 읽기 때문에 타입스크립트를 자바스크립트로 바꿔주는 과정을 거쳐야 한다. 따라서, 컴파일을 해주는 컴파일러도 같이 설치해 준다.

// tsc -v를 했을 때 오류가 나는 경우에만
PS C:\WINDOWS\system32> Set-ExecutionPolicy RemoteSigned

가끔, 컴파일러 설치에서 오류가 나는 경우가 있다. 이럴 때는 Windows PowerShell을 관리자 권한으로 실행해서 위의 코드를 입력해 주고 다시 확인해 보면 정상적으로 설치된 것을 확인할 수 있다.

tsc src/index.ts // ts -> js로 컴파일

컴파일을 할 때는 이런 식으로 해주면 된다. 위 코드는 src 폴더에서 index.ts를 index.js로 컴파일해 준다는 명령어이다.

npm i -g ts-node

ts-node는 ts 파일을 js로 컴파일 시킴과 동시에 실행까지 해주는 도구이다.

tsc src/index.ts // 1. 컴파일
node src/index.js // 2. 실행

ts-node src/index.ts // 컴파일 + 실행

ts-node를 사용하면 위의 tsc와 node 명령어를 한꺼번에 실행할 수 있다는 장점이 있다.

 

컴파일러 옵션 설정하기

tsc --init

타입스크립트에서 자바스크립트로 컴파일하는 데에도 옵션이란 게 있다. 이것 역시 개발자 취향에 맞게 직접 맞출 수도 있다. 컴파일러 옵션을 설정하는 가장 쉽고 빠른 설정은 자동 생성 도구를 이용하는 것이다. 위 코드를 사용하면 기본 옵션이 설정된 컴파일러 옵션 파일을 생성할 수 있다. (tsconfig.json이라는 파일이 생길 것이다.)

{
    "complierOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "dist",
        "strict": true,
        "moduleDetection": "force"
    },
    "ts-node": {
        "esm": true
    },
    "include": ["src"],
}

컴파일러 옵션을 직접 설정할 수도 있다. 그중 몇 가지 기본적인 옵션들을 소개하고자 한다.

 

include 옵션은 우리가 tsc 명령어를 통해 ts 파일을 컴파일할 때, 파일 하나하나 컴파일해 주는 게 아닌 include 옵션으로 설정한 폴더 안의 전체 ts 파일을 컴파일해 주는 옵션이다. 위 코드대로 설정해 주면 tsc 명령어를 입력했을 때, src 폴더 안에 있는 모든 ts 파일들을 컴파일해 준다.

 

target 옵션은 컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정해 주는 옵션이다. "ESNext"는 자바스크립트의 가장 최신 버전으로 설정한다는 뜻이다.

 

module 옵션은 모듈 시스템의 자바스크립트 버전을 설정해 주는 옵션이다. 여기서 모듈 시스템이란 import/export로 코드를 불러오고 내보내는 기능을 말하는데, 이것 역시 가장 최신 버전인 "ESNext"로 설정해 준다.

 

outDir 옵션은 컴파일 결과 생성할 자바스크립트 코드 위치를 결정해 주는 옵션이다. "dist"라고 입력하면 이제 컴파일된 js 파일들이 모두 dist 폴더 안에서 생성된다.

 

strict 옵션은 컴파일러의 타입 검사 엄격함 수준을 정하는 옵션이다. true의 경우 타입에 대한 검사를 매우 엄격하게 하기 때문에 조금 더 안정성 있는 코드를 작성할 수 있다.

 

moduleDetection 옵션은 타입스크립트 파일 하나하나를 모두 로컬(독립) 모듈로 취급하게 해 준다. 보통 한 프로젝트에서 모든 타입스크립트 파일은 전역 모듈로 취급된다. 즉, a.ts에서 변수 a를 사용하면 b.ts에서 변수 a를 사용할 수 없다.

일반적인 자바스크립트처럼 그냥 파일 하나하나가 모두 하나로 공유되는 게 아닌 각자 독립적으로 취급되고 싶다면, force 값을 넣어주면 된다. 그럼 자동으로 모든 타입스크립트 파일이 로컬 모듈로 취급된다.

이때, 주의할 점은 moduleDetection 옵션을 force로 설정해 주면 ts-node 명령어가 제대로 실행되지 않는다. 그렇기 때문에 ts-node 옵션에 "esm": true를 함께 설정해줘야 한다. (esm을 사용하기 위해서는 package.json 파일에 들어가 "type": "module"을 추가해줘야 한다.)

 

1. npm i @types/node // 타입스크립트 패키지 설치
2. npm i -g typescript // 타입스크립트 컴파일러 설치 (명령어 tsc  사용 가능해짐)
3. npm i -g ts-node // 타입스크립트 컴파일 + 실행하는 도구 설치
4. tsc --init // 타입스크립트 컴파일러 옵션 자동 생성
5. 컴파일러 옵션에 include를 설정해주면 터미널에 'tsc'만 입력해도 모두 컴파일된다.