tsc, tsc-watch 활용법

 

TypeScript는 JavaScript처럼 그 자체로 런타임에서 돌지 않는다.

 

다시 말해, TypeScript는 JavaScript로 컴파일이 되어야 Node.js든 브라우저에서든 작동할 수 있다.

 

TypeScript는 JavaScript의 정적 타입 버전으로 원래 동적 타입 언어인 JavaScript를 좀 더 쓸 만하게 만든 언어이다.

 

물론 정적 타입 언어가 무조건 동적 타입 언어보다 좋은 것은 아니다.

 

경우에 따라 동적 타입 언어가 더 유리한 경우가 있다. 다만 협업을 하거나 오랜 기간 유지보수를 해야 할 경우에는 거의 대부분 정적 타입 언어가 유리하다.

 

아무튼 이제는 백엔드 영역에서 Node.js를 사용하거나, 수명 이상이 참여하는 프로젝트에서는 TypeScript는 필수적이다.

 

Node.js의 등장과 함께 JavaScript 기반 백엔드 프레임워크는 그동안 Express.js가 높은 점유율로 생태계를 이끌어 왔으나,

 

이젠 적어도 기업 환경에서 Node.js 백엔드를 하려면 무조건 NestJS + TypeScript다.

 

그만큼 이제는 JavaScript 생태계로 밥을 벌어먹고 사는 사람이면 더이상 TypeScript를 떼어 놓고 갈 수가 없다.

 

NestJS에 대해서는 나중에 백엔드 포스팅을 할 때 자세히 다룰 거고,

 

TypeScript는 백엔드 프론트엔드 가리지 않고 다 쓰인다.

 

TypeScript는 ES3로도 컴파일이 가능하기 때문에 프론트엔드 개발 시에도 많이 쓰인다.

 

서론이 너무 길어진 것 같다.

 

일단 이전 포스트에서처럼 TypeScript를 쓰려면 무조건 글로벌에 tsc를 설치해야 한다.

TypeScript 환경 설정 - tsc, tsc-watch 설치

그다음에 프로젝트 최상위 폴더에 tsconfig.json을 만들어주고 다음과 같이 작성해본다. 프로젝트마다 조금씩 다르겠지만 나는 기본적으로 이 정도 설정을 유지하고 프로젝트를 진행한다.

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": false, // "any"타입에 오류를 발생할건지 아닌지 여부
        "noEmitOnError": true, // 오류가 발생한 경우 출력을 내보내지 않음
        "removeComments": true, // /*!로 시작하는 copy-right 헤더 주석을 제외한 모든 주석을 제거
        "sourceMap": true, // 소스맵 생성 여부
        "target": "es5", // 타겟 자바스크립트 버전, 프론트엔드 프로젝트의 경우 익스플로러를 지원해야 한다면 es3, 백엔드 프로젝트면 es8정도면 되겠다.
        "outDir": "dist" // 컴파일 결과물 출력 폴더
    },
    "include": ["src/**/*"], // 컴파일할 대상
    "exclude": ["node_modules", "**/*.spec.ts"] // 컴파일 제외 대상
}

 

이 외에도 아래 링크로 가면 다양한 옵션들을 볼 수 있다.

TSConfig Reference - Docs on every TSConfig option

 

그럼 tsc-watch란 무엇인가. 일단 package.json 파일을 보자.

{
  ...,
  "scripts": {
    ...,
    "start": "tsc-watch --onSuccess 'node dist/app.js'"
  },
  ...,
  "dependencies": {
    ...
  }
}

이렇게 작성이 되어 있다면 npm run start라고 터미널에 치면 위의 tsc-watch ... 명령이 실행될 것이다.

 

개발하면서 소스코드를 수정할 경우 내가 수정한 *.ts 파일만 수정이 될 거고, dist 폴더 하위에 있는 *.js 파일들은 변경이 되지 않을 거다.

 

그래서 TypeScript로 개발할 경우 소스코드 수정 후 수정된 것을 개발서버든 뭐든 아무튼 결과물을 보고 테스트하고 싶다면 무언가를 수정할 때마다 터미널에 tsc --build를 치고 있어야 한다.

 

근데 tsc-watch를 통해 저렇게 작성해두면 ts파일이 수정될 때마다 컴파일을 다시 하고 지정된 js 실행파일을 다시 실행해준다.

 

그냥 개발 효율 자체가 올라가고 이게 TypeScript니까 컴파일을 해야하고 어떻게 하고 그런 거 생각할 필요 없이 그냥 코드만 짜면 된다.

 

다음 링크도 참고하면 이 외에도 다양한 옵션들을 활용해볼 수 있다.

gilamran/tsc-watch