TypeScript 파일 컴파일

완료됨

앞서 살펴본 것처럼 TypeScript는 ECMAScript 2015(ECMAScript 6 또는 ES6)의 엄격한 상위 집합입니다. 모든 JavaScript 코드는 TypeScript 코드이기도 하며 TypeScript 프로그램은 JavaScript를 원활하게 사용할 수 있습니다. 실제로 .js에서 .ts로 확장명을 바꾸면 JavaScript 파일을 TypeScript 파일로 변환할 수 있습니다.

그러나 일부 TypeScript 코드는 JavaScript 코드가 아닙니다. TypeScript는 JavaScript에 새 구문을 추가하여 JavaScript를 더 쉽게 읽게 만들고 정적 형식 지정과 같은 일부 기능을 구현합니다. TypeScript 코드를 사용하면 개발이 더 쉽고 오류를 줄일 수 있지만, 브라우저와 대부분의 다른 런타임은 기본적으로 TypeScript를 지원하지 않습니다. 이러한 이유로 애플리케이션이 작동하도록 JavaScript로 변환하기 위해 TypeScript에는 빌드 단계(트랜스파일러)가 필요합니다.

Typescript 컴파일러를 사용하여 TypeScript 코드를 JavaScript 코드로 변환하거나 Babel, swc또는 Sucrase와 같은 TypeScript 호환 트랜스파일러를 사용할 수 있습니다. 이 프로세스는 TypeScript 관련 코드(예: 형식 선언 및 인터페이스)를 제거합니다. 또한 웹 페이지에서 실행할 수 있는 클린 JavaScript 파일이 생성되며, 이는 브라우저와 호환됩니다.

TypeScript 파일 컴파일

tsc 명령을 사용하여 명령 프롬프트에서 TypeScript 컴파일러를 실행합니다. 매개 변수 없이 tsc를 실행하면 현재 폴더에 있는 모든 .ts 파일이 컴파일되고 각각에 대해 .js 파일이 생성됩니다.

특정 파일을 컴파일할 수도 있습니다. 예를 들어 utility_functions.ts라는 TypeScript 파일을 컴파일하려면 tsc utility_functions.ts를 입력합니다.

참고

.ts 파일 확장명을 입력하는 것은 선택 사항입니다.

컴파일러 오류가 없으면 tsc 명령은 utility_functions.js라는 JavaScript 파일을 생성합니다.

코드에서 오류가 발견되면 컴파일러는 명령 창에 오류를 표시합니다. TypeScript 파일의 오류를 수정한 다음 tsc 명령을 다시 실행합니다.

컴파일러 옵션

컴파일러 옵션을 사용하여 소스 TypeScript에서 JavaScript가 생성되는 방식을 제어할 수 있습니다. 많은 명령줄 인터페이스에서 하는 것처럼 명령 프롬프트에서 또는 tsconfig.json이라는 JSON 파일에서 옵션을 설정할 수 있습니다.

다양한 컴파일러 옵션을 사용할 수 있습니다. 전체 옵션 목록은 tsc 명령줄 인터페이스 설명서에서 확인할 수 있습니다. 다음은 가장 일반적인 몇 가지 옵션입니다.

  • noImplicitAny
  • noEmitOnError
  • target
  • 디렉터리 옵션

컴파일을 제어하려면 tsc 명령에서 다음을 비롯한 컴파일러 옵션을 사용할 수 있습니다.

  • --noImplicitAny 옵션은 암시적 any 형식이 있는 표현식 및 선언에서 오류를 일으키도록 컴파일러에 지시합니다. 예를 들면 다음과 같습니다.

    tsc utility_functions.ts --noImplicitAny

  • --target 옵션은 JavaScript 파일의 ECMAScript 대상 버전을 지정합니다. 이 예제에서는 ECMAScript 6 규격 JavaScript 파일을 컴파일합니다.

    tsc utility_functions.ts --target "ES2015"

이후 모듈에서 다른 컴파일러 옵션에 대해 알아봅니다.