TypeScript 컴파일 설명 코드 컴파일 및 실행 방법

TypeScript는 JavaScript의 정적 타입 슈퍼셋으로, 일반 JavaScript로 컴파일됩니다. TypeScript를 효과적으로 사용하려면 컴파일 프로세스를 이해하는 것이 중요합니다. 이 가이드에서는 TypeScript 코드를 컴파일하고 실행하는 기본 사항을 설정에서 실행까지 안내합니다.

TypeScript 컴파일 이해

TypeScript 코드는 브라우저나 Node.js에서 직접 실행되지 않습니다. 대신 JavaScript로 컴파일해야 합니다. TypeScript 컴파일러인 `tsc`가 이 작업을 수행합니다. 이 프로세스에는 TypeScript 파일(`.ts`)을 모든 JavaScript 환경에서 실행할 수 있는 JavaScript 파일(`.js`)로 변환하는 작업이 포함됩니다.

TypeScript 환경 설정

TypeScript 코드를 컴파일하기 전에 Node.js와 npm이 설치되어 있는지 확인하세요. npm을 사용하여 전역적으로 TypeScript를 설치할 수 있습니다.

npm install -g typescript

이 명령은 TypeScript 컴파일러(tsc)를 전역적으로 설치해서 시스템의 어디에서나 접근할 수 있게 합니다.

TypeScript 코드 컴파일

TypeScript 파일을 컴파일하려면 터미널에서 프로젝트 디렉토리로 이동한 후 `tsc` 명령 뒤에 파일 이름을 입력합니다.

tsc filename.ts

`filename.ts`를 TypeScript 파일 이름으로 바꾸세요. 이 명령은 TypeScript 코드를 같은 이름이지만 `.js` 확장자를 가진 JavaScript 파일로 컴파일합니다.

TypeScript 구성 파일 사용

`tsconfig.json` 파일은 TypeScript 컴파일러 옵션과 프로젝트 설정을 구성하는 데 사용됩니다. 다음을 사용하여 이 파일을 생성할 수 있습니다.

npx tsc --init

다음은 기본적인 `tsconfig.json` 파일의 예입니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

이 구성은 TypeScript가 코드를 ECMAScript 6(es6)로 컴파일하고, CommonJS 모듈을 사용하고, 엄격한 유형 검사를 활성화하고, 컴파일된 파일을 `dist` 디렉토리에 출력하고, 디버깅을 위한 소스 맵을 생성해야 함을 지정합니다.

프로젝트의 모든 파일 컴파일

`tsconfig.json` 파일이 있으면 다음을 실행하여 프로젝트의 모든 TypeScript 파일을 컴파일할 수 있습니다.

tsc

이 명령은 `tsconfig.json` 파일을 읽고 구성에 지정된 모든 TypeScript 파일을 컴파일합니다.

컴파일된 JavaScript 코드 실행

TypeScript 코드가 JavaScript로 컴파일되면 Node.js를 사용하여 실행하거나 웹 프로젝트에 포함할 수 있습니다. Node.js로 JavaScript 파일을 실행하려면 다음을 사용합니다.

node dist/filename.js

`filename.js`를 `dist` 디렉토리에 있는 컴파일된 JavaScript 파일 이름으로 바꾸세요.

일반적인 컴파일 오류

컴파일하는 동안 오류가 발생할 수 있습니다. 다음은 몇 가지 일반적인 문제와 해결 방법입니다.

  • 구문 오류: TypeScript 코드에서 구문 문제를 확인하세요. 컴파일러는 문제가 있는 곳을 나타내는 오류 메시지를 제공합니다.
  • 유형 오류: 코드가 TypeScript의 유형 시스템을 준수하는지 확인하세요. 유형 주석을 검토하고 올바르게 정의되었는지 확인하세요.
  • 구성 문제: `tsconfig.json` 파일이 올바르게 구성되었고 프로젝트 디렉토리의 루트에 있는지 확인하세요.

결론

TypeScript 코드 컴파일은 개발 프로세스의 기본 단계입니다. 환경을 설정하고, 컴파일러를 구성하고, 일반적인 오류를 처리하는 방법을 이해하면 TypeScript 코드를 JavaScript로 효율적으로 변환하여 다양한 환경에서 실행할 수 있습니다. 이러한 지식은 TypeScript의 기능을 최대한 활용하고 개발 워크플로를 개선하는 데 도움이 됩니다.