[Typescript] 타입스크립트 프로젝트 시작 방법 (feat. tsconfig.json)

타입스크립트를 실행하기 위해서는 자바스크립트 파일로 변환해주는 컴파일 과정을 거쳐야 한다.

---

라이브러리 설치와 TSC (Typescript Compile)

일단 타입스크립트 모듈을 설치해야 한다.
터미널에 들어가서 npm install typescript -g로 타입스크립트 모듈을 설치하자.

npm install typescript -g

그 다음, 타입스크립트 파일을 간단하게 작성 후 저장을 하고 터미널을 타입스크립트가 있는 디렉토리(폴더)로 이동한 후에 tsc <타입스크립트 파일명> 을 입력하면 해당 디렉토리에 같은 이름의 자바스크립트 파일이 생성된다.

tsc index.ts

tsc 명령어를 대상 파일을 지정하지 않고 실행하면 현재 폴더에 있는 타입스크립트 설정 파일(tsconfig.json)을 기준으로 컴파일 한다. 만약 현재 폴더에 타입스크립트 설정 파일이 없다면 프로젝트 폴더 내에서 상위 폴더의 경로를 검색해 나간다.

타입스크립트 파일과 컴파일되어 생긴 자바스크립트 파일을 비교해 보면 타입만 없는 자바스크립트 파일이 생긴 것을 확인 할 수 있다.

---

타입스크립트 설정 파일

tsc를 할 때 부가적인 옵션을 줄 수 있는데, tsconfig.json이라는 파일을 만들어서 옵션을 지정해 줄 수 있다.

tsconfig.json

타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일

//tsconfig.json
{
  "compilerOptions": { //컴파일러 옵션 설정
    "allowJs": true, //해당 프로젝트안에 자바스크립트 파일을 허용
    "checkJs": true, //자바스크립트 파일에서 타입을 체크
    "noImplicitAny": true //변수의 기본 타입을 설정해 주지 않았으면 any로 설정해야 함
  } 
}

tsc를 실행하면 tsconfig.json가 정의한 가장 가까운 프로젝트를 컴파일하고, 원하는 파일 glob을 전달하여 TypeScript 파일 집합을 컴파일 할 수 있다.

# tsconfig.json에 대한 fs를 역방향으로 검토하여 컴파일 실행
tsc

# 컴파일러 기본값으로 index.ts만 컴파일
tsc index.ts

# 기본 설정으로 src 폴더 안에 모든 .ts 파일을 컴파일
tsc src/*.ts

# tsconfig.json의 컴파일러 설정으로 src 폴더 안에 모든 .ts 파일을 컴파일
tsc --project tsconfig.json src/*.ts

더 많은 옵션들은 공식문서 참고