TypeScript 컴파일 하는 방법, 기초부터 Watch Mode까지

TypeScript 컴파일 하는 방법, 기초부터 Watch Mode까지

 

 

현대 웹 개발에서 TypeScript는 점점 그 중요성을 더해가고 있습니다. 강력한 타입 시스템을 통해 개발자들이 더 안정적이고 관리하기 쉬운 코드를 작성할 수 있게 돕기 때문입니다. 하지만 TypeScript를 사용하기 위해서는 먼저 TS 파일을 일반 JavaScript 파일로 컴파일하는 과정이 필요합니다.

 

이 글에서는 TypeScript 파일을 컴파일하는 방법을 소개하고, 이 과정이 왜 중요한지에 대해 설명하겠습니다. TypeScript를 시작하는 분들에게 이 글이 길잡이가 되었으면 합니다.

 

 

TypeScript 컴파일 하는 방법

 

TypeScript 컴파일의 필요성

TypeScript는 브라우저에서 직접 실행될 수 없습니다. 따라서, TypeScript로 작성된 코드를 브라우저가 이해할 수 있는 JavaScript로 변환하는 과정이 필요한데, 이 과정을 '컴파일'이라고 합니다. 컴파일을 통해 개발자는 TypeScript의 강력한 기능을 활용하면서도, 최종적으로는 브라우저에서 실행 가능한 코드를 얻을 수 있습니다.

 

TypeScript 학습 체크리스트 - 컴파일러 개념 및 tsc 용도, 주요 명령어

 

TypeScript 컴파일 방법

TypeScript 설치: 컴파일러를 사용하기 전에 Node.js가 설치되어 있어야 합니다. Node.js가 설치되어 있다면, 다음 명령어를 통해 TypeScript 컴파일러를 전역으로 설치할 수 있습니다.

 

npm install -g typescript

 

tsconfig.json 생성: 프로젝트 루트 디렉토리에서 tsconfig.json 파일을 생성합니다. 이 파일은 TypeScript 컴파일러에게 프로젝트의 컴파일 옵션을 알려주는 역할을 합니다.

 

{
  "compilerOptions": {
    "outDir": "./dist",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "allowJs": true
  },
  "include": [
    "./src/**/*"
  ]
}

 

위 설정은 src 디렉토리 내의 모든 TypeScript 파일을 ES5 버전의 JavaScript로 컴파일하여 dist 디렉토리에 저장하도록 지시합니다.

 

컴파일 실행: 설정이 완료되었다면, 프로젝트 루트에서 다음 명령어를 실행하여 TypeScript 파일을 컴파일할 수 있습니다.

 

tsc

 

이 명령어는 tsconfig.json 파일에 정의된 설정을 사용하여 TypeScript 파일을 컴파일합니다.

 

 

tsc watch mode, 저장할 때마다 자동 컴파일

 

TypeScript 개발을 좀 더 편리하게 만들어주는 기능 중 하나가 바로 tsc watch mode입니다. 이 모드를 활성화하면, 파일을 저장할 때마다 자동으로 컴파일이 수행됩니다. 이는 개발 과정을 매우 효율적으로 만들어 줍니다.

 

한 파일만 컴파일하기

tsc 파일명

 

한 파일만 컴파일 후 watch mode 활성화하기

tsc 파일명 --watch

 

혹은

tsc 파일명 -w

 

전체 파일 컴파일하기

tsc

 

전체 파일 컴파일 후 watch mode 활성화하기

tsc --watch

 

혹은

tsc -w

 

이 기능을 사용하면 파일을 저장할 때마다 TypeScript 파일이 자동으로 컴파일됩니다. 이 모드를 사용할 때는 해당 명령어를 입력한 터미널 세션을 종료하지 않아야 합니다.

 

 

tsconfig.json에 대해서 (json 데이터)

 

tsconfig.json 파일 다운 받기 및 생성하기

프로젝트에 tsconfig.json 파일을 추가하는 것은 TypeScript 프로젝트를 시작하는 데 있어 첫 번째 단계입니다. 이 파일은 TypeScript 컴파일러에게 프로젝트 설정 정보를 제공합니다.

 

tsc --init

 

위 명령어를 실행하면 tsconfig.json 파일이 생성되며, 이 파일 안에는 다양한 설정 옵션이 주석 형태로 포함되어 있습니다.

 

"exclude"/"include": 컴파일할/컴파일하지 않을 파일 구분하기

tsconfig.json 파일 내에서 exclude와 include 배열을 사용하여 컴파일 과정에서 포함시킬 혹은 제외할 파일을 지정할 수 있습니다.

 

{
  "exclude": [
    "파일명 혹은 파일 확장자 등",
    "node_modules" // 항상 제외시켜야 하는 폴더
  ],
  "include": [
    "파일명 혹은 파일 확장자 등"
  ]
}

 

"exclude": 컴파일 과정에서 제외할 파일이나 폴더를 지정합니다. node_modules 폴더는 기본적으로 제외시키는 것이 좋습니다.

 

"include": 컴파일 과정에 포함될 파일이나 폴더를 지정합니다.

 

실제 컴파일되는 파일은 include에 지정된 파일에서 exclude에 지정된 파일을 제외한 결과물입니다.

 

 

파일 및 폴더 지정 방법 예시

파일명 지정: 확장자를 포함한 파일명을 직접 지정합니다.

확장자를 기준으로 모든 파일 지정: *.ts와 같이 확장자를 사용하여 특정 유형의 모든 파일을 지정합니다.

특정 폴더 내의 파일 지정: "**/*.ts" 또는 "src/**/*"와 같이 폴더 경로를 사용하여 지정합니다.

 

---

 

끝으로

TypeScript 코드를 JavaScript로 컴파일하는 과정은 이 도구를 실제 프로젝트에 효과적으로 활용하기 위한 첫 걸음입니다. 이 글을 통해 TypeScript 컴파일 과정을 이해하고, 여러분의 프로젝트에 적용해 볼 수 있기를 바랍니다.

 

TypeScript의 타입 시스템과 같은 강력한 기능들을 활용하여 보다 안정적이고 유지보수가 용이한 애플리케이션을 개발해 보세요.

 

▼ TypeScript 관련 다른 글 ▼

 

TypeScript 학습 체크리스트 - boolean, number, String, tuple, enum, 배열의 사용법

 

TypeScript 객체지향 설계 원칙 SOLID 설명, 예시 코드