Typescript 컴파일 옵션 정리

huurray·2021년 2월 13일
1
post-thumbnail

들어가기

tsconfig.json에서 타입스크립트에 대한 컴파일 옵션을 설정할 때 직관적으로 찾아 볼 수 있도록
주석을 통해 정리 해보았다.

간단한 정리

{
  "compilerOptions": {
    "target": "ES2017", // 사용할 ECMAScript 버전 설정

    /////////// module ///////////
    "module": "CommonJS", // 모듈 설정
    "moduleResolution": "node", // 모듈 (검색)해석 방식 설정
    "allowSyntheticDefaultImports": true, // export default 를 export 한 값들을 가지는 객체로 설정
    "esModuleInterop": true, // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

    /////////// path ///////////
    "baseUrl": ".", // Non-relativ 모듈 혹은 paths 옵션의 기준 디렉토리
    "paths": { // baseUrl 옵션을 기준디렉토리로 불러올 모듈의 위치 설정이 가능
      "*": ["*"]
    },
    // "rootDirs": [ ], // 가상 디덱토리를 설정
    // "rootDir": "./", // 입력파일의 rootDir 설정
    // outDir옵션을 사용할때만 사용
    // "outDir": "dest", // 출력할 디덱토리
    // "outFile": "", // 단일파일로 출력시 파일명

    /////////// declaration ///////////
    "declaration": false, // .d.ts 파일의 생성 여부
    // "declarationDir": "", // .d.ts 파일이 생성되는 디렉토리 설정

    /////////// log ///////////
    "diagnostics": false, // Show diagnostic information.
    "traceResolution": false, // 모듈 검색에 대한 로그메세지 출력 여부
    "listEmittedFiles": false, // 컴파일된 결과 파일들 이름을 터미널에 출력
    "listFiles": true, // 컴파일된 파일들 이름을 터미널에 출력
    "locale": "ko", // 에러메세지 출력 언어 설정
    "pretty": true, // 에러 메시지를 예쁘게 설정
    // @TODO 테스트 필요

    /////////// React ///////////
    "jsx": "react", // jsx 지원
    "jsxFactory": "React.createElement", // jsx 팩토리 함수 설정,

    /////////// JS ///////////
    // "allowJs": false, // 자바스크립트 파일 컴파일 허용 여부.
    // "checkJs": false, // allowJs 옵션이 true여서 js파일 모듈을 사용시 js파일의 오류 검사 여부
    // "maxNodeModuleJsDepth": 0, // js 모듈을 검색할 최대 깊이

    /////////// Lint ///////////
    "strict": true, // 모든 엄격한 타입 검사 옵션을 활성화
    // noImplicitAny, noImplicitThis, alwaysStrict, strictNullChecks, strictFunctionTypes
    "allowUnreachableCode": false, // 도달 불가능한 코드에 대한 허용 여부.
    "allowUnusedLabels": false, // 사용하지 않는 라벨에 대한 허용 여부
    "noFallthroughCasesInSwitch": true, // 잘못 적혔다고 판단되는 switch문에 대한 에러 발생
    "noImplicitReturns": true, // 함수의 모든 경로가 값을 반환하지 않으면 에러 발생
    "suppressExcessPropertyErrors": false, // 객체 리터럴에 대한 초과 속성 검사 억제 여부
    "suppressImplicitAnyIndexErrors": false, // 인덱스 서명이없는 개체를 인덱싱하는 경우 --noImplicitAny 오류 억제여부
    // 자세한 내용은 문제 #1232를 참조
    "noStrictGenericChecks": true, // 함수에서 generic의 엄격한 검사 해제 여부
    "noUnusedLocals": true, // 사용안된 지역변수에 대한 오류 보고 여부
    "noUnusedParameters": true,  // 사용안된 파라미터에 대한 오류 보고 여부

    /////////// edit outfile ///////////
    "charset": "utf8", // 입력파일의 문자집합 형식
    "emitBOM": false,// 출력 파일의 시작 부분에 UTF-8 바이트 순서표 (BOM) 추가여부
    // "newLine": "lf", // end of line sequence 설정
    "removeComments": true, // 주석 삭제
    "disableSizeLimit": false, // Disable size limitation on JavaScript project.
    "noEmit": false, // 결과파일을 저장하지 않음
    "noEmitOnError": false, // 에러 발생시 결과파일을 저장하지 않음
    "preserveConstEnums": false, // const enum형 선언을 지우지 않을건지 여부

    /////////// more spec ///////////
    // "lib": [], // 컴파일에 포함될 라이브러리 파일 목록
    "downlevelIteration": false, // target이 ES3 및 ES5 일때도 for..of, spread, destructuring 문법 지원
    "experimentalDecorators": true, // ES Decorator에 대한 실험적 기능 사용 여부
    "stripInternal": false, // /** @ internal * /JSDoc annotation이 있는 코드에 대한 선언을 내 보내지 않을지 여부

    /////////// optimization ///////////
    "importHelpers": true, // tslib에서 helpers (e.g. __extends, __rest, etc..)를 가져온다.

    /////////// sourceMap ///////////
    // "inlineSourceMap": false, // 소스맵을 결과코드에 추가
    // @TODO 테스트 필요
    // "mapRoot": "./map", // "source map 파일을 저장할 root 디렉토리 지정
    // 지정하지 않으면 변환된 파일과 동일한 디렉토리에 저장된다.
    "sourceMap": true, // 소스맵(*.map) 파일 생성 여부
    // "sourceRoot": "", // 디버거가 알아야될 .ts파일 root 위치. 소스맵(*.map)에 적용된다.
    // @TODO 테스트 필요
    // "inlineSources": false, // 변환전 파일 .ts 코드를 결과코드에 추가
    // @TODO 테스트 필요

    /////////// etc ///////////

    // "noImplicitUseStrict": false, // @TODO 테스트 필요

    // "noLib": false, // 기본 라이브러리(lib.d.ts)를 가져오지 않는다.

    // "plugins": [ ], // 편집환경을 더 좋게 변경하기 위한 플러그인 기능

    // "preserveSymlinks": false, // Symlink파일에서 다른 모듈을 import시 기준경로를 Symlink 경로로 설정
    // 기존에는 Symlink파일에서 다른 모듈을 import시
    // Symlink파일의 실제 경로에서 모듈을 가져왔다.
    // https://nodejs.org/api/cli.html#cli_preserve_symlinks

    // "skipLibCheck": false, // 모든 선언파일(*.d.ts)의 유형검사를 건너뛸지 여부

    // "watch": false, // 파일 변경시 컴파일

    /////////// ??? ///////////
    // "isolatedModules": false, // @TODO 뭘까...
    // https://github.com/Microsoft/TypeScript/issues/2499
    // "emitDecoratorMetadata": false, // @TODO 테스트 필요
    // Emit design-type metadata for decorated declarations in source. See issue #2577 for details.
    // "noResolve": false // @TODO 테스트 필요
  }
}

상세한 정리

{
    // https://github.com/Microsoft/TypeScript/tree/master/tests/cases/compiler
    // https://github.com/Microsoft/TypeScript/tree/master/tests/baselines/reference
    // 공식문서 외에도 위 테스트 코드를 참고시 도움이 됩니다.

    "compilerOptions": {
        "allowJs": false, // 자바스크립트 파일 컴파일 허용 여부.
        // import add from './add.js' 와 같이 js파일 import 허용

        "allowSyntheticDefaultImports": false, // export default 를 export 한 값들을 가지는 객체로 설정
        // export class Foo { member: string; } 을 할시 (b.ts)
        // export default { Foo } 가 기본으로 설정된다.

        "allowUnreachableCode": false, // 도달 불가능한 코드에 대한 허용 여부.
        /*
        function foo() {
            if (true) {
                return 42;
            }
            else {
                return "42"; // 도달 불가능
            }
        };
        */

        "allowUnusedLabels": false, // 사용하지 않는 라벨에 대한 허용 여부
        /*
        target1:
        target2: // 사용하지 않는 라벨
        while (true) {
            break target1;
        }
        */

        "alwaysStrict": false, // 항상 strict mode로 분석할지 여부
        // 모든 코드를 strict mode로 분석함
        // "use strict"; 를 컴파일된 js파일에 추가
        // @TODO noImplicitUseStrict 와 비교 필요

        "baseUrl": ".", // Non-relativ 모듈 혹은 paths 옵션의 기준 디렉토리

        "charset": "utf8", // 입력파일의 문자집합 형식

        "checkJs": false, // allowJs 옵션이 true여서 js파일 모듈을 사용시 js파일의 오류 검사 여부

        "declaration": false, // .d.ts 파일의 생성 여부

        "declarationDir": "", // .d.ts 파일이 생성되는 디렉토리 설정

        "diagnostics": false, // @TODO 테스트 필요
        // Show diagnostic information.

        "disableSizeLimit": false, // @TODO 테스트 필요
        // Disable size limitation on JavaScript project.

        "downlevelIteration": false, // target이 ES3 및 ES5 일때도 for..of, spread, destructuring 문법 지원
        // TypeScript 2.3 이전에는 target이 ES6/ES2015 이후 버전일때만 지원함

        "emitBOM": false,// 출력 파일의 시작 부분에 UTF-8 바이트 순서표 (BOM) 추가여부
        // 윈도우 스토어 인증을 통과하기 위해 필요
        // https://stackoverflow.com/questions/33722915/typescript-generated-js-files-encoding

        "emitDecoratorMetadata": false, // @TODO 테스트 필요
        // Emit design-type metadata for decorated declarations in source. See issue #2577 for details.

        "experimentalDecorators": false, // ES Decorator에 대한 실험적 기능 사용 여부
        // vue에서는 vue와 Typescript를 같이 쓸때는 활성화를 권장하고 있다.

        "forceConsistentCasingInFileNames": false, // 파일명에 대소문자 구분하지 않아도 되는 기능 사용 여부
        // 직역: 파일 이름에 일관된 casing 강제 적용

        "importHelpers": false, // tslib에서 helpers (e.g. __extends, __rest, etc..)를 가져온다.
        // 중복코드를 없애기 위한 최적화용 옵션
        // https://github.com/Microsoft/tslib

        "inlineSourceMap": false, // 소스맵을 결과코드에 추가
        // @TODO 테스트 필요

        "inlineSources": false, // 변환전 파일 .ts 코드를 결과코드에 추가
        // @TODO 테스트 필요

        "isolatedModules": false, // @TODO 뭘까...
        // https://github.com/Microsoft/TypeScript/issues/2499

        "jsx": false, // jsx 지원

        "jsxFactory": "React.createElement", // jsx 팩토리 함수 설정,

        "lib": [], // 컴파일에 포함될 라이브러리 파일 목록
        // target 옵션 값에 따라 기본으로 포함되는 라이브러리가 있다.
        // lib 옵션 설정시 그 라이브러리 파일만 포함된다.
        // target ES5 -> DOM,ES5,ScriptHost
        // target ES6 -> DOM,ES6,DOM.Iterable,ScriptHost
        /*
        ES5
        ES6
        ES2015
        ES7
        ES2016
        ES2017
        ESNext
        DOM
        DOM.Iterable
        WebWorker
        ScriptHost
        ES2015.Core
        ES2015.Collection
        ES2015.Generator
        ES2015.Iterable
        ES2015.Promise
        ES2015.Proxy
        ES2015.Reflect
        ES2015.Symbol
        ES2015.Symbol.WellKnown
        ES2016.Array.Include
        ES2017.object
        ES2017.SharedMemory
        ES2017.TypedArrays
        esnext.asynciterable
        */

        "listEmittedFiles": false, // 컴파일된 결과 파일들 이름을 터미널에 출력

        "listFiles": false, // 컴파일된 파일들 이름을 터미널에 출력

        "locale": "ko", // 에러메세지 출력 언어 설정

        "mapRoot": "", // "source map 파일을 저장할 root 디렉토리 지정
        // 지정하지 않으면 변환된 파일과 동일한 디렉토리에 저장된다.

        "maxNodeModuleJsDepth": 0, // js 모듈을 검색할 최대 깊이
        // allowJs 옵션이 활성화 되있을때만 적용
        // https://github.com/Microsoft/TypeScript/tree/master/tests/cases/projects/NodeModulesSearch/maxDepthIncreased

        "module": "es3", // 모듈 설정
        // "AMD", "System" 사용시 outFile 옵션을 설정하면 여러개의 모듈이 포함된 단일파일로 출력
        // "ES6", "ES2015"는 target값이 "ES5" 이하일때 사용 가능

        "moduleResolution": "node", // 모듈 (검색)해석 방식 설정

        "newLine": "lf", // end of line sequence 설정
        // 기본적으로 플랫폼에 따라 "crlf" (windows) or "lf" (unix) 가 설정됨

        "noEmit": false, // 결과파일을 저장하지 않음
        // @TODO 테스트 필요

        "noEmitHelpers": false, // helpers (e.g. __extends, __rest, etc..)를 결과파일에 포함시키지 않음
        // https://github.com/ngParty/ts-helpers
        // 이 옵션 대신 importHelpers 옵션을 사용시 더 깔끔하게 최적화 가능

        "noEmitOnError": false, // 에러 발생시 결과파일을 저장하지 않음

        "noFallthroughCasesInSwitch": false, // 잘못 적혔다고 판단되는 switch문에 대한 에러 발생
        // 예를 들어 case문에 break가 없으면 오류 발생

        "noImplicitAny": false, // any타입 금지

        "noImplicitReturns": false, // 함수의 모든 경로가 값을 반환하지 않으면 에러 발생

        "noImplicitThis": false, // this 타입을 명시적으로 지정하지 않으면 에러 발생

        "noImplicitUseStrict": false, // @TODO 테스트 필요

        "noLib": false, // 기본 라이브러리(lib.d.ts)를 가져오지 않는다.
        // @TODO 옵션 사용처

        "noResolve": false, // @TODO 테스트 필요

        "noStrictGenericChecks": false, // 함수에서 generic의 엄격한 검사 해제 여부
        /*
        type A = <T, U>(x: T, y: U) => [T, U];
        type B = <S>(x: S, y: S) => [S, S];

        function f(a: A, b: B) {
            a = b;  // 엄격한 검사시 Error
            b = a;  // Ok
        }
        */

        "noUnusedLocals": false, // 사용안된 지역변수에 대한 오류 보고 여부

        "noUnusedParameters": false,  // 사용안된 파라미터에 대한 오류 보고 여부

        "outDir": "", // 출력할 디덱토리
        // @TODO 테스트 필요

        "outFile": "", // 단일파일로 출력시 파일명
        // @TODO 테스트 필요

        "paths": { }, // baseUrl 옵션을 기준디렉토리로 불러올 모듈의 위치 설정이 가능
        // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

        "plugins": [ ], // 편집환경을 더 좋게 변경하기 위한 플러그인 기능
        // 새로운 구문이나 다른 형식 검사 동작등 새로운 언어 기능을 추가할수는 없음
        // https://github.com/Microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin

        "preserveConstEnums": false, // const enum형 선언을 지우지 않을건지 여부
        // 본래 컴파일 하는동안 완전히 제거되어 성능과 메모리상 이점을 얻기위해
        // const enum형 선언은 지우고 코드상에 직접 맵핑되는데 이 옵션을 활성화시
        // const enum형 선언을 지우지 않는다
        /*
        // js파일
        const enum E {
            Value = 1, Value2 = Value
        }
        console.log(E.value)
        console.log(E.value2)

        // 비활성화시 결과파일
        console.log(1 /* Value * /);
        console.log(1 /* Value2 * /);


        // 활성화시 결과파일
        var E;
        (function (E) {
            E[E["Value"] = 1] = "Value";
            E[E["Value2"] = 1] = "Value2";
        })(E || (E = {}));

        console.log(E.value)
        console.log(E.value2)
        */

        "preserveSymlinks": false, // Symlink파일에서 다른 모듈을 import시 기준경로를 Symlink 경로로 설정
        // 기존에는 Symlink파일에서 다른 모듈을 import시
        // Symlink파일의 실제 경로에서 모듈을 가져왔다.
        // https://nodejs.org/api/cli.html#cli_preserve_symlinks

        "pretty": false, // 에러 메시지를 예쁘게 설정
        // @TODO 테스트 필요

        "reactNamespace": "", // React 네임스페이스 설정. 권장되지 않는 옵션.
        // jsxFactory 옵션을 사용하십시오

        "removeComments": false, // 주석 삭제
        // @TODO '/*!' 주석 테스트 필요

        "rootDir": "", // 입력파일의 rootDir 설정
        // outDir옵션을 사용할때만 사용

        "rootDirs": [ ], // 가상 디덱토리를 설정
        // https://www.typescriptlang.org/docs/handbook/module-resolution.html#virtual-directories-with-rootdirs

        "skipDefaultLibCheck": false, // 사용을 권장하지 않음 skipLibCheck 옵션을 사용

        "skipLibCheck": false, // 모든 선언파일(*.d.ts)의 유형검사를 건너뛸지 여부

        "sourceMap": false, // 소스맵(*.map) 파일 생성 여부

        "sourceRoot": "", // 디버거가 알아야될 .ts파일 root 위치. 소스맵(*.map)에 적용된다.
        // @TODO 테스트 필요

        "strict": false, // 모든 엄격한 타입 검사 옵션을 활성화
        // noImplicitAny, noImplicitThis, alwaysStrict, strictNullChecks, strictFunctionTypes

        "strictFunctionTypes": false, //@TODO 테스트 필요

        "strictNullChecks": false, // null과 undefined 타입 구분 여부
        // https://basarat.gitbooks.io/typescript/docs/options/strictNullChecks.html

        "stripInternal": false, // /** @ internal * /JSDoc annotation이 있는 코드에 대한 선언을 내 보내지 않을지 여부
        // @TODO 부가설명 필요

        "suppressExcessPropertyErrors": false, // 객체 리터럴에 대한 초과 속성 검사 억제 여부
        // @TODO 부가설명 필요

        "suppressImplicitAnyIndexErrors": false, // 인덱스 서명이없는 개체를 인덱싱하는 경우 --noImplicitAny 오류 억제여부
        // 자세한 내용은 문제 #1232를 참조
        // @TODO 부가설명 필요

        "target": "es3", // 코드에서 사용할 ECMAScript 버전 설정

        "traceResolution": false, // 모듈 검색에 대한 로그메세지 출력 여부

        "typeRoots": [ ], // 타입(*.d.ts)파일을 가져올 디렉토리 설정
        // 설정 안할시 기본적으로 ./node_modules/@types

        "types": [ ], // 타입을 가져올 패키지목록 (따른 패키지는 (*.d.ts)파일을 가져오지 않음)
        // ["node", "lodash", "express"] 설정시
        // ./node_modules/@types/node, ./node_modules/@types/lodash, ./node_modules/@types/express
        // 위 3개를 가져오고 node_modules/@types/* 의 다른 패키지는 가져오지 않음

        "watch": false // 파일 변경시 컴파일
    }
}
profile
Frontend Developer.

0개의 댓글