[Typescript] 타입스크립트 컴파일러 옵션 설정

dolfin·2023년 6월 28일

TypeScript

목록 보기

4/7

tsconfig.json


{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "dist",
        "strict": true,
        "moduleDetection": "force"
      	"strictNullChecks" : false ,
    },
  "include": ["src"]
}

cra로 설치 하는 타입스크립트만 사용해봐서 컴파일러 옵션을 제대로 배운적이 없는데
한 입 크기로 잘라먹는 타입스크립트 강사님 진짜 자세하게 설명 잘해준다. 리액트 강의도 인기 많던데 궁금쓰😳

컴파일러 옵션이란?

타입스크립트는 컴파일시 타입오류가 없는지 확인하고 자바스크립트로 변환하는 조큼 독특한 컴파일 과정을 거친다. 이러한 과정에서 어떠한 버전과 엄격함(?)을 정할지 세부사항을 정하는 것을 컴파일러 옵션이라고 부른다.

tsconfig.json

해당 파일이 없다면 아래 명령어로도 생성이 가능하다.

tsc --init

include

이제 하나하나 옵션 값들이 무엇을 의미하는지 알아보도록 하자.

ts 파일들을 컴파일 하면 자동으로 변환된 js 파일들이 생성된다.

이때, 음.. 나는 src 폴더 안에 있는 ts파일만 컴파일 시키겠어.

하면 이렇게 입력해주면 된다.

  "include": ["src"]

보통은 우리가 src 폴더내에 또 component, page 등의 폴더를 만들어서 작업을 하기에
기본적으로 cra로 설치했을때는 아래와 같이 옵션이 설정되어 있다.

  "include": [ "./src/**/*"]

target

해당 옵션은 자바스크립트 몇 버전으로 변환할지 정하는 옵션이다.
ES5버전으로 하고 싶다면 ES5!
나는 최신 버전으로 하고 싶었기에 "ESNest" 로 넣어줬다.

"target": "ESNext",

module

"module": "ESNext",

해당 옵션은 자바스크립트 코드의 모듈을 설정하는 옵션이다.
CommonJS 모듈로 설정하면 아래와 같이 CommonJS문법으로 코드가 변환되어 나온다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.helloWithName = exports.hello = void 0;
const hello = () => {
    console.log("hello");
};
exports.hello = hello;

exports.helloWithName = helloWithName;

outdir

 "outDir": "dist",

컴파일을 하다보면 작업하는 ts파일이 늘어날수록 js 파일들 역시 같이 늘어난다.
그러다보면 매우 정신도 없고 내가 원하는 파일을 찾을 수 없을 것이다.
그때 컴파일되는 파일은 "dist" 폴더로 가버렷..! 하는 옵션이다.

strict

"strict": true,

위 옵션은 말 그대로 엄격한 타입 검사를 의미하는 옵션이다.
타입스크립트는 점진적 타입 시스템이라 자기 스스로 타입을 추론하는 경우들도 있지만
함수의 매개변수 같은 경우에는 타입 지정이 필요하다. 이때 true로 설정해야 우리가 원하는 엄격한 타입 검사를 받을 수 있다.

moduleDetection

"moduleDetection": "force"

해당 옵션을 설명 하기전에 알아야할 사실 하나가
타입스크립트는 모오오든 파일을 기본적으로 전역 파일(모듈)로 취급한다.
따라서 index.ts / apple.ts에서 각자 const a = 1 이라고 작성하면 오류가 생긴다 ;;
전역으로 관리하다보니 변수이름도 파일마다 만들어줘야되고.. 여간 귀찮을거 같은데

이럴때 전역이 아닌 로컬모듈로 취급할수있도록 만드는 옵션이 moduleDetection 이다.
"force"로 설정하면 모든 타입스크립트 파일을 로컬(독립)모듈로 취급 된다.