(TypeScript) - TypeScript 컴파일러 옵션 설정하기

■ TypeScript 컴파일러 옵션 설정하기

• 얼마나 엄격하게 타입 오류 검사할지
• 자바스크립트 코드 버전 어떻게 할지

타입스크립트 컴파일러 옵션을 설정하는 이유는 위 2가지이다. 

프로젝트에 맞게 설정해주면 된다. 

 

- tsc --init

: tsconfig(타입스크립트 컴파일러 옵션 설정 파일) 생성

 

먼저 init 명령어를 통해 컴파일러 옵션 설정 파일을 생성해준다. 

 

■ 컴파일러 옵션 알아보기

 

 

tsconfig include 배열 안에 ["src"] 넣으면,

해당 디렉터리에 있는 폴더 안에 있는 파일 모두 컴파일하라는 뜻이다.

따라서 해당 명령어를 넣고 tsc 명령어를 치면 src 안에 새롭게 TS 파일 갯수만큼 JavaScript 파일이 생성된다.

 

 

compilerOptions 을 통해 target 설정을 하게 되면 자바스크립트 버전 설정이 가능하다. 

시스템 기본은 CommonJs 되어 있고, EsModule 설정을 원하면 ESNext 를 넣어주면 된다. 

 

※ skipLibCheck

: @types 버전이 20버전 이상으로 업데이트 되면서 특정 라이브러리 타입 검사 오류가 나서 해당 검사를 skip 한다는 것.

이 코드를 넣어줘야지 터미널에 오류가 사라진다. 

 

    "compilerOptions": {
        "target": "ESNext",
        "skipLibCheck": true,
        "module": "ESNext"
    },

 

"module": "ESNext"

: 변환되는 자바스크립트 코드의 모듈 시스템을 설정

프로젝트의 성향에 따라 해당하는 모듈 시스템으로 설정하면 된다. (ESNext 또는 commonJs 등)

 

    "compilerOptions": {
        "target": "ESNext",
        "skipLibCheck": true,
        "module": "ESNext",
        "outDir": "dist"
    },

 

"outDir": "dist"

: 생성되는 JavaScript 가 어디 위치했으면 좋을지 설정한다.

따라서 내가 원하는 폴더를 적으면 그 폴더안에 파일이 생성된다.

 

 

tsc 명령어를 치면 사진과 같이 dist 폴더 안에 JavaScript가 생성된 걸 볼 수 있다. (폴더도 같이 생성됨)

 

    "compilerOptions": {
        "target": "ESNext",
        "skipLibCheck": true,
        "module": "ESNext",
        "outDir": "dist",
        "strict": true
    },

 

"strict": true : 얼마나 엄격하게 검사할지 설정하는 옵션 (true 면 엄격하게 검사 진행)

 

 

같은 변수 선언했을 때 오류가 난다.

그 이유는 모든 타입스크립트 파일을 전역 모듈로 보기 때문이다.

※ 전역 모듈 : 전역적인 공간에 같이 있다고 간주하는 것.

 

 

export 나 import 와 같은 모듈 시스템 키워드를 한 번이라도 작성하면

이 것은 독립된 모듈(개별 모듈)이라고 인식해서 오류가 나지 않는다.

        "moduleDetection": "force"

 

혹은 해당 코드를 넣어준다.

뜻은 각각 모듈을 어떤 것으로 인식할 지 설정해줌. 

 

※ 계속해서 에러 경고 떠있을 경우

 

계속해서 에러 경고 떠있을 경우에는 서버가 tsconfig.json 을 못읽은 경우이므로,

ctrl + shift + p -> restart 로 TS 서버를 다시 시작 해준다.

 

 

tsc 컴파일 하면 자동으로 es 모듈 명령어가 들어가 있는 것을 확인 가능하다.

 

★ 정리

모든 TypeScript 파일은 글로벌 모듈, 전역 모듈로 인식 되기 때문에 같은 변수를 사용하면 오류가 뜬다.

따라서 개별 모듈로 인식해줘야 하기 때문에 해당하는 프로젝트 모듈 시스템(CommonJs 또는 EsModule) 에 맞는 명령어를

하나 이상 넣어주면 오류가 사라진다.

 

우리 실습은 EsModule 로 진행했기 때문에 export{} 를 넣어주거나,

이 명령어를 자동으로 넣어주는 옵션인 "moduleDetection": "force" 를 넣어주면 해결된다.