[TypeScript] 타입스크립트 환경 설정하기

학습 목표

---

오늘은 배워두면 프론트엔드 개발에서 유용하게 활용할 수 있는 타입스크립트 환경설정 하는 방법에 대해서 알아보겠습니다.
타입스크립트에 대해서 구구절절 설명을 늘어놓기보다는 실제 코드로 돌려보며, 어떤 성격을 가진 언어인지에 관해 차차 알아가봅시다.

타입스크립트 설치하고 설정하기

---

자, 먼저 디렉토리부터 만들어줍시다. 그런 후, 해당 디렉토리에서 npm init 명령어를 통해, package.json 파일을 만들어 줄 것입니다.

mkdir testTsc
cd testTsc
npm init -y

설정이 완료되면 다음으로 넘어갑니다. 타입스크립트를 설치하는 방법에는 두 가지가 있습니다. 로컬 설치, 글로벌 설치. 특별한 경우가 아니라면, 모든 패키지는 되도록이면 로컬로 설치되는 편이 버젼 관리함에 좋기 때문에 로컬에 설치하도록 하겠습니다.

$ npm install typescript 

# or 
$ yarn add typescript

설치가 완료되면, tsc 명령어를 사용할 수 있습니다. 이를 활용해, 셋팅해봅시다.

tsc --init 

그러면 자동으로 타입스크립트 셋팅이 완료된 파일(tsconfig.json)이 생성된 것을 볼 수 있습니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
  }
}

자, 그럼 차근차근 하나씩 알아봅시다.

먼저 target은 해석하려는 자바스크립트 언어의 버젼을 말합니다. 기본적으로 설정되는 값은 es5입니다. 이는 너무 오래됐으니, es6로 바꿔줍니다.

module은 모듈 시스템을 말하며, Node.js 환경에서 실행할 것이므로 common.js 방식을 선택하겠습니다.

strict는 무엇일까요? 자바스크립트에서 사용했던 'use strict' 설정과 비슷하다고 보면 됩니다. 다양한 설정을 하나의 command 만으로 처리해줍니다. 그 중 대표적인 것이 strictNullChecks 설정입니다. 자동으로 "strictNullChecks" : true로 처리해줍니다. 참고로 해당 설정은 undefined와 null을 사용하지 못하도록 제한하는 역할을 합니다.

타입스크립트 실행하기

---

자, 이제 본격적으로 타입스크립트 파일(.ts)를 실행해봅시다.

tsc [파일명].ts

test.js 파일이 생성된 게 확인되시죠?

좀 더 편리하게 사용하려면 ts-node 패키지를 설치해줍니다. 이는 자바스크립트로 변환하는 과정을 메모리 상에서 처리해줌으로써, js 파일을 생성하지 않고도 실행결과를 확인할 수 있도록 도와줍니다.

npm i -D ts-node

타입스크립트 파일이 (자바스크립트 파일로 변환 과정을 거쳐) 바로 실행되는 것을 확인할 수 있었습니다.

마무리

---

오늘은 간단하게 타입스크립트 개발 환경을 설정하는 방법에 관하여 알아보았습니다. 앞으로 타입스크립트와 관련된 포스팅을 자주 할 예정입니다. 다음 시간에는 타입스크립트는 무엇인지에 알아보는 시간을 갖도록 하겠습니다. 읽어주셔서 감사합니다.