본문 바로가기
JavaScript/TypeScript

tsc 명령어 사용법[TypeScript]

by GangDev 2024. 12. 19.

tsc 명령어 사용법

tsc(TypeScript Compiler) 명령어는 타입스크립트 코드를 컴파일하는 데 사용되는 주요 도구입니다. 이 명령어의 사용법과 주요 기능들을 살펴보겠습니다.

컴파일러 옵션 이해

tsc 명령어는 다양한 옵션을 통해 컴파일 과정과 결과물을 조절할 수 있습니다:

  • -t, --target: 컴파일 대상 ECMAScript 버전을 지정합니다.
  • -m, --module: 모듈 시스템을 지정합니다(예: commonjs, es6).
  • -, --watch: 파일 변경 시 자동으로 다시 컴파일합니다.
  • -p, --project: tsconfig.json 파일 경로를 지정합니다.

예를 들어, 다음 명령어는 ES2018을 대상으로 commonjs 모듈 시스템을 사용하여 컴파일합니다:

tsc -t ES2018 -m commonjs

파일 단위 컴파일 vs 프로젝트 전체 컴파일

tsc 명령어는 파일 단위와 프로젝트 전체 단위로 모두 사용할 수 있습니다:

  • 파일 단위 컴파일: 특정 파일만 컴파일합니다.
  • 프로젝트 전체 컴파일: tsconfig.json 파일을 사용하여 프로젝트 전체를 컴파일합니다.

파일 단위 컴파일 예시:

tsc greeter.ts

프로젝트 전체 컴파일 예시:

tsc

이 명령어는 현재 디렉토리에 있는 tsconfig.json 파일을 참조하여 프로젝트 전체를 컴파일합니다.

watch 모드 사용법

Watch 모드는 파일 변경 시 자동으로 다시 컴파일하는 기능입니다:

  • -w 또는 --watch 플래그를 사용하여 활성화합니다.
  • 파일 변경 시 즉시 컴파일이 시작됩니다.
  • 프로젝트 전체나 특정 파일에 대해 watch 모드를 적용할 수 있습니다.

프로젝트 전체 watch 모드:

tsc -w

특정 파일 watch 모드:

tsc -w greeter.ts

watch 모드는 개발 과정에서 매우 유용합니다. 파일을 저장할 때마다 자동으로 컴파일되어 변경 사항을 즉시 확인할 수 있기 떄문입니다.

추가 팁:

  1. tsconfig.json 파일을 사용하면 프로젝트의 컴파일 설정을 중앙에서 관리할 수 있습니다.
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
  1. npm 스크립트를 사용하여 tsc 명령어를 편리하게 실행할 수 있습니다.
{
  "scripts": {
    "build": "tsc",
    "dev": "tsc -w"
  }
}

이렇게 설정하면 npm run build 또는 npm run dev 명령어로 컴파일을 실행할 수 있습니다.

tsc 명령어와 관련된 옵션들은 타입스크립트 공식 문서에서 더 자세히 확인할 수 있습니다. 프로젝트의 요구사항에 맞게 적절한 옵션을 선택하여 사용하면 됩니다.