[TS] 컴파일러, 그리고 tsc와 tsconfig.json

1. 컴파일러란?

컴파일러는 우리가 쓰는 프로그래밍 언어 코드를 → 다른 언어로 변환하는 도구에요.

- C언어 컴파일러는 C언어 → 기계어 코드 변환을 해주고

- TypeScript 컴파일러는 TypeScript → JavaScript 코드 변환을 해줘요!

 

2. 컴파일러는 왜 등장했을까?

컴퓨터는 기본적으로 기계어로 작성된 프로그램만 이해할 수 있어요!

그런데, 위의 스크린샷을 보면 아시겠지만 기계어는 사람이 이해하거나 작성하기 어려워요

그래서 사람이 더 쉽게 사용할 수 있는 C언어 같은 고수준 프로그래밍 언어가 등장했어요.

하지만 컴퓨터가 C언어로 작성된 코드를 이해하려면 기계어로 변환이 필요했고, 이를 도와주는 컴파일러가 필요하게 되었죠!

 

3. TypeScript 컴파일러

TypeScript 컴파일러는 TypeScript → JavaScript 코드 변환을 해준다고 설명했었죠

☑️ 여기서 갑자기 궁금한 점 🤔 🤔

위에서 컴퓨터가 이해하기 위해서는 기계어로 변환되어야 한다고 했잖아요, 그럼 JavaScript도 결국에는 기계어로 변환 되어야할텐데, 왜 JavaScript는 컴파일러가 없나요?

JavaScript는 동적 언어(인터프리터 언어)라서, 기계어로 미리 변환할 필요가 없어요. 대신, 실행할 때 브라우저나 Node.js 같은 JavaScript 엔진이 그 코드를 한 줄씩 읽고 바로바로 기계어로 변환해서 실행해요.

• Node.js나 Chrome 브라우저는 V8 엔진을 사용해서 JavaScript를 처리하고,
• Firefox는 SpiderMonkey 엔진을 사용해요.

 

4. 컴파일러와 인터프리터의 차이

정리하자면:

• 정적 언어(컴파일 언어): C언어처럼 미리 기계어로 변환해야 실행할 수 있어요. 이때 변환을 도와주는 것이 컴파일러예요.
• TypeScript: TypeScript는 컴파일러(tsc)를 통해 JavaScript로 변환되고, 변환된 JavaScript는 JavaScript 엔진이 실행하면서 기계어로 변환돼요.
• 동적 언어(인터프리터 언어): JavaScript처럼 코드를 실행하면서 그때그때 해석하고 기계어로 변환해요. 컴파일러가 필요 없고, 인터프리터가 코드를 해석해서 바로 실행해줘요.

 

이제 정리가 되셨나요? 그렇다면, 왜 컴파일러를 알아야 할까요?

 

5. 컴파일러의 주요 역할 

☑️ 타입 검사

TypeScript 컴파일러(tsc)는 타입 오류를 미리 찾아줘요. 예를 들어, 숫자 변수에 문자를 넣으려고 하면 "잘못된 타입!"이라고 오류를 알려줘요. 이렇게 컴파일러는 오류를 미리 알려줘서, 개발자가 실행 전에 수정할 수 있게 도와주는 역할을 해요.

☑️ 코드 변환

컴파일러는 우리가 작성한 코드를 다른 언어로 변환해요. tsc는 TypeScript 코드를 JavaScript로 변환하고, C언어 컴파일러는 C언어를 기계어로 변환해요. 이 과정이 있어야 코드가 컴퓨터에서 실행될 수 있죠.

 

☑️ 에러 처리와 디버깅 지원

컴파일러는 코드를 변환하면서 오류를 발견하면 에러 메시지를 출력해요. 개발자는 이 메시지를 보고 문제를 파악하고 빠르게 수정할 수 있어요. 컴파일러가 변환하는 과정을 잘 이해하면, 문제 발생 시 어떤 방식으로 해결할지 더 쉽게 예측할 수 있어요. 이를 통해 디버깅 과정에서 큰 도움이 돼요.

 

6. tsconfig.json 해부하기

tsconfig.json 이란?

• TypeScript 프로젝트의 설정 파일이에요. 이 파일에서 여러 가지 옵션을 사용해서 TypeScript 코드가 어떻게 동작할지를 설정할 수 있어요.
• tsc --init 명령어를 실행하면 이 파일이 생성돼요. 주로 컴파일할 파일과 컴파일 방법을 정의하는 데 쓰여요.

주요 옵션들

☑️  compilerOptions - target 옵션:

• 코드를 어떤 JavaScript 버전으로 변환할지 정하는 옵션이에요.
• es5 로 설정하면 CommonJS 버전으로 컴파일되구요!
• es2016(=es7) 로 설정하면 ES2016 버전으로 컴파일이 됩니다!
  • 최신 브라우저는 보통 ES2016을 지원하니 이렇게 설정하시는 것을 추천드려요!

• 단, 이것을 정할 때는 TypeScript가 어느 환경에서 실행이 되어야하는지를 고려하셔야 해요!
  • 만약, 내가 만든 프로젝트가 생각보다 레거시한 환경에서 동작해야 된다면? → es5
  • 그렇지 않다면 → es2016

 

☑️  compilerOptions - module 옵션:

• JavaScript 모듈 형식을 지정하는 옵션이에요. 모듈을 어떻게 가져오고 내보낼지를 정해줘요.
• target 옵션과는 서로 독립적인 관계로 프로젝트의 요구사항에 따라 옵션을 설정하시면 됩니다!

☑️  compilerOptions - outDir 옵션:

• 컴파일된 JavaScript 파일들이 저장될 폴더를 정하는 옵션이에요.(출력 디렉터리를 지정)
• 예를 들어, "outDir": "dist"로 설정하면 컴파일된 파일들이 dist 폴더에 저장돼요.

☑️  compilerOptions - strict

• 엄격한 타입 검사 옵션을 모두 활성화하는 옵션이에요!
  • strictNullChecks
    • 잠재적으로 null(undefined)이 될 수 있는 값들에 대해서 엄격하게 확인하는 옵션이에요!
  • strictFunctionTypes
  • strictBindCallApply
  • strictPropertyInitialization
  • noImplicitAny
    • 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 any타입을 부여하지 않도록 해요.
    • 이 옵션을 활성화하면 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언할 수 있죠!
  • noImplicitThis
  • alwaysStrict해당 옵션을 true로 설정하면 아래의 옵션들이 자동으로 true로 설정이 되어요.
• 이 옵션을 꼭 true로 설정하는 것을 추천해요.

☑️  compilerOptions - sourceMap 옵션:

• 소스 맵을 생성하는 옵션이에요. 소스 맵이 있으면 디버깅할 때 원래 TypeScript 코드를 쉽게 찾을 수 있어요.
• 개발 중에는 꼭 true로 설정하는 게 좋아요. 하지만 배포할 때는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수 있어요!

☑️  include, exclude 옵션:

• 컴파일할 파일과 컴파일에서 제외할 파일을 정하는 옵션이에요.
• “include": ["src/**/*"]
  • src 디렉토리 밑의 친구들을 컴파일 하겠다는 의미에요!

• "exclude": ["node_modules", "dist"]
  • node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외하겠다는 의미에요!

 

7. d.ts 파일 알아보기

💡 .d.ts 파일은 JavaScript 라이브러리를 TypeScript에서 사용할 수 있게 도와주는 파일이에요.

 

왜 d.ts 파일이 필요할까요?

• • TypeScript가 나오기 전에는 당연히도 JavaScript로만 코드를 작성했겠죠?
  • 아직까지 이 세계에는 JavaScript 코드의 양 >>> TypeScript 코드의 양일 것입니다.
  • 그렇다면, 이미 작성된 다양한 JavaScript 라이브러리와 호환성을 유지할 수 있어야겠죠?
  • 어떻게 TypeScript 코드는 JavaScript 라이브러리와 호환성을 유지할 수 있을까요?

@types 라이브러리의 등장

• 이 라이브러리는 외부 JavaScript 라이브러리에 대한 타입 정보를 TypeScript에 제공해줘요.
• 실제로 @types 디렉터리에 들어가 보면, .d.ts 파일들이 잔뜩 있어요.

그렇다면 이 .d.ts 파일은 무엇일까요?

• .d.ts 파일은 TypeScript 타입 정의 파일이에요.
• 이 파일은 TypeScript가 JavaScript 라이브러리의 타입 정보를 알 수 있게 도와줘요. 예를 들어:
  • 외부 라이브러리의 함수가 어떤 타입을 반환하는지,
  • 클래스가 어떤 타입인지,
  • 객체가 어떤 타입인지 등을 알려주는 역할을 해요.
• 뿐만 아니라 타입 추론도 가능하게 해줘요. 타입 추론이란, 타입이 명시가 되지 않았을 때 컴파일러가 알아서 해당 타입에 대해 추론을 하는 것이에요.

따라서 해 라이브러리에 대한 .d.ts 파일만 있으면 기존의 JavaScript 라이브러리를 TypeScript에서도 그대로 사용할 수 있어요