타입스크립트는 다음의 설치 파일이 필요하다.
yarn add tsc typescript ts-node @types/chance @types/node @types/ramda
- tsc ⇒ 타입스크립트의 파이썬 python 명령어 버전이다. —help를 하면 여러가지 명령어들을 볼 수 있고, —init을 하면 컴파일을 위한 tsconfig.json 파일을 만들어 준다.
- ts-node ⇒ 지정된 디렉토리 안에 있는 지정한 TS 파일을 실행해볼 때에 쓴다.
- typescript ⇒ 타입스크립트를 쓸 수 있게 해준다.
- types/chance ⇒ chance라는 자바스크립트 라이브러리를 쓸 수 있게 해주는 타입스크립트 버전으로 가짜 데이터를 생성 해준다.
- types/ramda ⇒ ramda라는 자바스크립트 라이브러리를 쓸 수 있게 해주고, 타입스크립트 버전으로 함수형 프로그램을 할 때 유용하게 쓴다.
- types/node ⇒ ts-node를 타입스크립트에서 읽고 쓰게 해준다.
config 파일 생성 및 설정
npx tsc --init
위 명령어를 입력하면 많은 주석 처리된 json파일 하나가 생성된다. 타입스크립트의 대한 설정을 하는 파일인데 그 속에 코드들을 정리하고 필요한 부분을 활성화 해본다. 이곳에서는 두 가지가 존재하는데 compilerOptions과 include 옵션이 있다. include 옵션은 지정한 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함시킬 때에 쓴다. 쉽게 말해서 컴파일화 시킬 TS파일의 경로 설정이다.
compilerOptions
이 항목은 tsc 명령 형식에서 옵션을 나타낸다.
- module ⇒ 자바스크립트 모듈은 웹 프라우저에서 AMD(비동기적 정의 모듈) 방식으로 동작하지만, node.js는 CommonJS(설명링크)의 방식으로 만들어져있다.
tsconfig.json파일에서 compilerOptions 항목에 있는 module 항목은 동작 대상 플랫폼이 웹 브라우저인지, Node.js인지를 구분해 그에 맞는 모듈 방식으로 컴파일하려는 목적으로 만들어졌다. 때문에 플랫폼 값은 아래와 같이 설정이 가능하다.
- 브라우저: amd
- Node.js: commonjs
- 그외: none, system, umd, ES2015~2020, ESNEXT
- moduleResolution ⇒ module이 어떤 환경에서 동작하는지 보고 설정하는 값으로 Node.js면 node, 브라우저면 classic으로 설정한다.
- target ⇒ 트렌스파일할 대상 자바스크립트의 버전을 설정한다. 대부분 es5를 하나 그 외 버전도 할 수가 있다. 바벨을 설치해놨기 때문에 나는 ESNEXT로 설정했다.
- baseUrl, outDir ⇒ 자바스크립트 파일을 저장하는 디렉토리를 설정한다. baseUrl의 "."은 기본값이다. outDir는 baseUrl 설정값을 기준으로 하위 디렉토리 이름이다. 이때 빌드된 결과가 OutDir에서 설정될 곳에 저장된다.