[Typescript] tsconfig.json 옵션

https://www.scaler.com/

 

overview

이 글에서는 여러 옵션중 `files`, `include`, `exclude`에 대해서 다룹니다.  

{
    "compilerOptions": {
        "out": "test.js"
    },
    "files": [
      "literal.ts"
    ],
    "include": [
        "**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "tests/**/*.spec.ts",
        "utils/t2.ts"
    ]
}

 

 

1. files

프로그램에 포함할 파일의 허용 목록을 지정할 수 있습니다.  
파일을 찾을 수 없으면 오류가 발생합니다. 

{
  "compilerOptions": {},
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]
}

포함해야할 파일의 수가 많다면 `include`를 사용하는 것이 좋습니다.

 

 

 

2. include

프로그램에 포함할 파일 이름 또는 패턴의 배열을 지정합니다.  
이러한 파일 이름은 파일이 포함된 디렉터리 기준으로 확인됩니다.
files, exclude와 다르게 v2에서 추가되었습니다.
default : **/*   
files 옵션이 활성화 되었을 때 default : []

{
  "include": ["src/**/*", "tests/**/*"]
}

여기에는 다음의 파일들이 포함됩니다.

https://www.typescriptlang.org/

`include`를 통해서 패턴 형태로 원하는 파일 목록을 지정할 수 있습니다.
`include`와 `exclude` 모두 `glob` 패턴을 지원합니다.

• *   : 0개 이상의 문자와 매치됩니다. (디렉터리 구분 기호는 제외)
• ?   : 하나의 문자와 매치됩니다. (디렉터리 구분 기호는 제외)
• **/ : 단계에 관계없이 어떤 디렉토리든 매치됩니다.

패턴의 마지막 경로 세그먼트가 파일 확장자나 와일드카드 문자를 포함하지 않으면 디렉토리로 처리되며, 해당 디렉토리 내에서 지원하는 확장자를 가진 파일이 포함됩니다. (ex: `.ts``.tsx``.dts`가 기본적으로 포함되며,   `allowJs`가 `true`로 설정된 경우 `.js` 및 `.jsx`도 포함)

 

 

3) exclude

include를 확일할 때 건너뛰어야 하는 파일 이름 또는 패턴의 배열을 지정합니다.  
default : node_modules,  bower_components,  jspm_packages

 

 

 

📚  정리

만약 `files`와 `include`가 모두 지정되지 않은 경우, 컴파일러는 해당 디렉터리와 하위 디렉터리에 있는 모든 TS(.ts, d.ts 및 .tsx) 파일을 기본값으로 포함하며, exclude 속성을 사용하여 제외된 파일을 제외합니다.  (allowJs가 true로 설정된 경우에는 JS 파일(.js 및 .jsx)도 포함합니다.  

 

만약 `files` 또는 `include` 속성이 지정된 경우, 컴파일러는 대신 이러한 두 속성에 의해 포함된 파일의 합집합을 포함합니다.  

`outDir` 컴파일러 옵션을 사용하여 지정된 디렉터리의 파일은 files 속성을 통해 명시적으로 포함되지 않는 한 항상 제외됩니다.

 

`include`를 사용하여 포함된 파일은 `exclude` 속성을 사용하여 필터링 할 수 있습니다. 그러나 `files` 속성을 사용하여 명시적으로 포함된 파일은 `exclude`에 관계없이 항상 포함됩니다.  

 

 

❗️ 심화

resolveJsonModule을 true로 설정하고, composite 프로젝트를 사용하려 할 때, JSON 파일을 모듈처럼 사용하려면 해당 JSON 파일을 명시적으로 나열하거나 'include'패턴을 사용해야 합니다.   (관련 링크)

 

즉 아래처럼 해줘야합니다. 

❌

 

✅

 

 

그런데 file로 명시적으로 추가하면 에러가 발생하는 것 같다.  따라서 include로 하는게 좋아보인다. 

 

 

 

 

 

 

 

---

 

 

 

Reference

https://www.typescriptlang.org/tsconfig#files

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html

https://github.com/microsoft/TypeScript/pull/5980