2023 - 07 - 19 컴파일러 Complier, tsc, 타입스크립트 컴파일러, tsconfig.json, 컴파일러 옵션

오늘 배운 것: 컴파일러, tsc(TypeScript 컴파일러)

 

✅ 체크리스트

• [ ] 컴파일러의 개념에 대해서 공부하고 tsc를 어떻게 사용하는지 파악합니다.
• [ ] tsconfig.json의 필수 옵션들을 숙지합니다.
• [ ] boolean, number, String, tuple, enum, 배열의 사용법을 이해합니다.
• [ ] enum, object literal의 차이점과 활용법을 이해합니다.
• [ ] Partial<T>, Required<T>, Readonly<T>, Pick<T, K>, Omit<T, K>를 이해합니다.
• [ ] 클래스, 상속, 추상 클래스 및 인터페이스에 대해 이해합니다.
• [ ] S.O.L.I.D 원칙을 기반으로 좋은 객체 지향 설계 방법을 이해합니다.

 

컴파일러: 특정 프로그래밍 언어가 정적 언어로써의 정체성을 유지할 수 있게 하는 도구로써, 프로그래밍 언어로 작성된 소스 코드를 다른 프로그래밍 언어로 변환해주며, 이런 변환 과정에서 소스코드의 구문과 구조를 검사하여 문제가 없는지 확인한다.

 

즉 타입스크립트 컴파일러인 tsc는 TypeScript → JavaScript 코드 변환을 해준다

 

컴파일러의 역할 1. 타입검사.

TypeScript 컴파일러인 tsc는 소스 코드의 정적 타입 검사를 수행하고, 이를 통해 타입관련 오류를 발견하고 수정할 수 있다.

 

컴파일러의 역할 2. 코드 변환.

타입스크립트 컴파일러인 tsc는 TypeScript → JavaScript 코드 변환을 해주므로, 이는 디버깅 과정에서 큰 도움이 된다.

 

컴파일러의 역할 3. 최적화.

비효율적으로 작성된 코드를 효율적으로 바꿔준다. 코드가 최적화되면 전반적인 어플리케이션 실행 시간이 더 빨라진다.

 

JavaScript는 동적언어(인터프리터 언어)이다.

정적 언어(=컴파일언어) => 기계어로 변환이 되어야 한다.

동적 언어(=인터프리터 언어) => V8엔진이 코드를 한줄씩 실행하면서 동적으로 해석한다.

---

tsc 명령어

https://www.typescriptlang.org/docs/handbook/compiler-options.html

Documentation - tsc CLI Options

• tsc 주요 명령어
  • tsc --init
    • tsconfig.json이 생성되는 명령어. (npm init과 같은기능). 타입스크립트 초기화.
  • tsc index.ts
    • index.ts를 컴파일 한다,
    • .ts는 TypeScript 파일의 확장자이다.
  • tsc src/*.ts
    • src 디렉토리 안에 있는 모든 TypeScript 파일을 컴파일한다.
  • tsc index.js --declaration --emitDeclarationOnly
    • @types 패키지를 위한**.d.ts 파일 생성**을 하는 명령어이다.
    • TypeScript로 작성된 모듈이 아니라 JavaScript로 작성된 모듈에 타입 선언을 제공할 때 유용하게 쓰인다.

---

tscongfig.json은 타입스크립트 프로젝트의 설정파일이다. 마지 자바스크립트의 설정파일이 config.json이듯이 말이다.

https://www.typescriptlang.org/ko/tsconfig

TSConfig Reference - Docs on every TSConfig option

(1). compilerOptions - strict옵션은 true로 설정

(2). compilerOptions - sourceMap옵션은 개발 환경에서 true로 설정

(3). tsc --init 명령을 실행하면 tsconfig.json 생성됨.

 

 

컴파일러 옵션

 

compilerOptions - module 옵션 

- TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정한다,
- 모듈을 가져오고 내보내는 방식을 결정하는 옵션이다,
- target 옵션과는 서로 독립적인 관계이므로, 프로젝트의 요구사항에 따라 옵션을 설정하면 된다.

 

compilerOptions - outDir 옵션

- 컴파일된 JavaScript 파일이 저장될 출력 디렉터리를 지정한다.
- 예를 들어, `"outDir": "dist"`로 설정하면 컴파일된 파일들이 `dist` 폴더에 저장된다.

 

-  `compilerOptions - strict` 옵션

 

    - 엄격한 타입 검사 옵션을 모두 활성화하는 옵션이다.
    - TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있다.
    - 해당 옵션을 true로 설정하면 아래의 옵션들이 자동으로 true로 설정된다.
        - `strictNullChecks`

            - 잠재적으로 null(undefined)이 될 수 있는 값들에 대해서 엄격하게 확인하는 옵션이다.
        - `strictFunctionTypes`
        - `strictBindCallApply`
        - `strictPropertyInitialization`
        - `noImplicitAny`

            - 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 `any`타입을 부여하지 않도록 한다. 이 옵션을 활성화하면 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언할 수 있다.

        - `noImplicitThis`
        - `alwaysStrict`
  해당 옵션은 꼭 true로 설정해야 한다.

 

 

compilerOptions - sourceMap 옵션

 

- 컴파일된 JavaScript 파일에 대한 소스 맵을 생성하는 옵션이다.
- 소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인할 수 있다.
- 코드 디버깅에 매우 큰 도움이 되기 때문에 *개발 환경*에서는 꼭 true로 설정하기.
- 프로덕션 환경에서는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수 있다.

 

include , exclude 옵션

- tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션이다.
- “include": ["src/**/*"]

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

 

---

https://teamsparta.notion.site/tsconfig-json-18e9fb5007194b3a9e659b151f1253ae

tsconfig.json 해부하기