[TS] 타입스크립트 설치 및 환경 구축

< 목차 > 
1. 코드에디터 설치 (VSCode)
2. Node.js 설치
3. TypeScript 컴파일러 툴 설치
4. ts-node 설치

1. 코드에디터 설치 (VSCode)

1-1. 설치

vscode 설치 링크로 들어가서 운영체제 환경에 맞는 파일을 다운로드해서 설치한다.

vscode를 설치하면 TypeScript 설정 파일(tsconfig.json)이 자동으로 생성된다.

1-2. StrictNullChecks 설정

StrictNullChekcs는 null과 undefiend 타입을 참조하려고 할 때 타입 에러를 보여줄지 여부를 결정하는 옵션이다 (공식문서 참고)

vscode를 실행한 후, Settings 설정창을 연다. (단축키: (맥: cmd + ,) / (윈도우: ctl + ,))

- Settings > 검색창에 strict null 검색 > Extensions > TypeScript > Strict Null Checks: 엄격하게 널 체크

2. Node.js 설치

Node.js를 설치하는 이유는 npm 패키지 매니저를 사용해서 타입스크립트 컴파일러를 설치하기 위해서다.

Node.js는 자바스크립트 코드를 실행해 주는 런타임 환경이며, npm은 자바스크립트 라이브러리를 설치 및 관리하기 쉽게 도와주는  Node.js 기반으로 된 패키지 매니저다.

2-1. 설치

Node.js 설치 링크로 가서 운영체제 환경에 맞는 LTS 버전의 파일을 다운로드한다.

2-2. 설치 확인

$ node -v // node 버전 확인
$ npm -v // npm 버전 확인

3. TypeScript 컴파일러 툴 설치

TypeScript 컴파일러 툴은 타입스크립트 파일을 자바스크립트 파일로 변환해 주는 툴이다. Node.js는 타입스크립트 코드를 실행할 수 없기 때문에 자바스크립트 코드로 변환해 주는 작업이 필요하다.

3-1. 설치

터미널에서 TypeScript 패키지를 글로벌하게 설치한다 (TypeScript 설치 링크 참고)  

$ npm install -g typescript

만약 위 명령을 시도했는데, Error: EACCES: permission denied 에러가 발생한다면 sudo 명령어를 이용하면 된다.

$ sudo npm install -g typescript
// 패스워드 입력 필요 !!

3-2. 설치 확인

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

 

3-3. 타입스크립트를 자바스크립트로 변환

tsc 명령어를 이용하면 타입스크립트 파일이 자바스크립트 파일로 변환되어 파일명.js 파일이 만들어진다. 그럼 node 명령어를 이용해 변환된 js 파일을 실행할 수 있다.

$ tsc 파일명.ts // 파일명.ts 타입스크립트 파일을 파일명.js 자바스크립트 파일로 변환
$ node 파일명.js // 변환되어 생성된 파일명.js 자바스크립트 파일을 실행

 

3-4. --watch 모드로 ts 파일이 업데이트되면 자동으로 js 파일도 업데이트 되도록 반영

tsc 명령에 --watch 모드를 이용하면 타입스크립트 파일이 업데이트 될 때마다 자동으로 js 파일로 컴파일해 주기 때문에, 파일이 변경될 때마다 매번 수동으로 tsc 명령어를 이용해 컴파일해주지 않아도 된다.

$ tsc 파일명.ts -w

 

4. ts-node 설치

터미널에서 tsc 명령어를 이용해 파일을 변환하여 생성된 js 파일을 node로 수행시키는 작업은 번거롭다. 그래서 자동으로 ts 파일을 js 파일로 변환 후 실행까지 시켜주는 툴인 ts-node를 설치한다.

4-1. 설치

터미널에서 ts-node를 글로벌하게 설치한다.

$ npm install -g ts-node

4-2. 설치 확인

$ ts-node -v

4-3. 실행

$ ts-node 파일명.ts // 타입스크립트 파일을 자바스크립트 파일로 변환 및 실행