디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 Typescript 프로젝트의 루트가 된다.

해당 파일은 프로젝트를 컴파일 하는데 필요한 루트 파일과 컴파일러 옵션을 지정할 수 있다.

해당 파일은 Typescript를 이용한 프로젝트를 진행할 때 상당히 중요하다.

그 옵션들과 용도에 대해서 자세히 알아보자.

타입스크립트 변환 명령어를 입력할 때마다 대상 파일의 경로를 지정하지 않고 설정파일에 미리 정의할 수 있다.

{
  "files": ["app.ts", "./utils/math.ts"]
}

files와 같이 파일을 개별로 지정하지 않고 include 옵션으로 변환할 폴더를 지정할 수 있다.

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

TIP

와일드카드 패턴

• *: 해당 디렉토리의 모든 파일 검색

• ? : 해당 디렉토리 안에 파일의 이름 중 한 글자라도 맞으면 해당

• ** : 하위 디렉토리를 재귀적으로 접근(하위 디렉토리의 하위 디렉토리가 존재하는 경우 반복해서 접근)

include와 반대되는 속성으로 변환하지 않을 폴더 경로를 지정

{
  "exclude": ["node_modules"]
}

만약 설정하지 않으면 기본적으로 node_modules나 bower_components같은 폴더를 제외

TIP

컴파일 대상 경로를 정의하는 속성의 우선순위

files > include = exclude

타입스크립트 설정 파일은 기본적으로 node_modules를 제외하지만 써드 파티 라이브러리의 타입을 정의해놓는 @types 폴더는 컴파일에 포함한다.

└─ node_modules
   ├─ @types => 컴파일에 포함
   ├─ lodash => 컴파일에서 제외

그런데 여기서 만약 @types의 기본 경로를 변경하고 싶다면 아래와 같이 지정할 수 있다.

예를 들어서 프로젝트의 루트 디렉터리에 @types/ 디렉터리를 만들었다면

{
  "compilerOptions": {
    "typeRoots" : ["node_modules/@types", "@types"]
  }
}

include에 이미 포함된 곳이라면 굳이 추가해줄 필요가 없다.

대부분이 잘못 알고 있는 것 중 하나가 프로젝트 내에서 type 파일을 만들게 되면

typeRoots에 추가해야 한다고 알고 있는데 include에 포함돼 있는 .d.ts 파일은

자동으로 typescript가 인식하므로 넣어줄 필요가 없다.

특정 타입스크립트 설정 파일에서 다른 타입스크립트 설정의 내용을 가져와 추가할 수 있는 속성이다.

// config/base.json
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

확장한 파일의 내용을 가져다가 덮어쓰거나 새로 정의할 수도 있다.

타입스크립트 파일을 컴파일 했을 때 빌드 디렉토리에 생성되는 자바스크립트의 버전을 의미힌다.

기본 값인 es3부터 es5, es6 등 가장 최신 버전인 esnext까지 있다.

// tsconfig.json
{
  "target": "esnext"
}

타입스크립트 파일을 자바스크립트로 컴파일 할 때 포함될 라이브러리의 목록이다.

이 속성을 활용하는 가장 대표적인 사례는 async코드를 컴파일 할 때 Promise객체가 필요하므로 아래와 같은 설정을 해줘야 한다.

// tsconfig.json
{
  "lib": ["es2015", "dom", "dom.iterable"]
}

여기서 es2015는 프로미스 객체를 타입스크립트에서 인식할 수 있게 필요한 속성이고, dom 관련 속성은 DOM API를 사용하는 경우 필요하다.

files와 include를 통해서 선택된 파일들의 결과문이 저장되는 디렉터리를 outDir을 통해서 지정할 수 있다.

만약 타입 체크용으로 사용한다면 필요가 없다.

outFile이라는 속성도 있는데, 이는 모든 파일을 하나의 파일로 합쳐서 출력할 경우 지정하는 파일명이다.

module이 none, system 또는 amd가 아닌 경우 사용할 수 없다.

noEmit을 true로 설정하면 최종결과물이 나오지 않게 된다.

이를 통해서 단순 타임 체크용으로 사용할 것인지 아니면 tsc를 컴파일용으로 사용할 것인지 지정할 수 있게 된다.

declaration을 true로 설정하게 되면 해당 .ts 파일의 .d.ts 파일 또한 같이 출력물에 포함되게 된다.

declaration 파일들만 따로 출력하게 하고 싶다면 declarationDir로 별도 지정해 줄 수 있다.

emitDeclarationOnly가 true라면 출력물에 declaration 파일만 나오게 된다.

noEmit과 같이 사용할 수 없다.

sourceMap을 true로 지정하면 출력물에 .js.map 이나 .jsx.map 파일을 포함된다.

inlineSourceMap을 true을 지정하면 .js 파일 내부에 source map이 포한된다.

두 속성은 같이 사용할 수 없다.

strict를 true로 지정하면 typescript의 type 검사 옵션 중 strict* 관련된 모든 것을 true로 만들게 된다.

strictFunctionTypes, strictNullChecks 등 이와 같은 속성들이 모두 true가 되고 필요에 따라서 선택하여 false로 지정하면 된다.

기본값은 false이며 true로 설정하기를 권장한다.

isolatedModules을 true로 설정하면 프로젝트 내에 모든 각각의 소스코드 파일을 모듈로 만들기를 강제한다.

소스코드 파일에서 import 또는export를 사용하면 그 파일은 모듈이 된다.

만약 import / export를 하지 않으면 그 파일은 전역 공간으로 정의된다.

isolatedModules가 true로 되어 있을 때 모듈로 소스코드를 작성하지 않으면 에러를 출력한다.

만약 babel과 같은 외부 도구를 사용한다면 isolatedModules를 true로 설정하는 것이 좋다.

외부 라이브러리의 모듈을 참조할 경우 .d.ts 파일에 타입 정의가 잘못돼 있어서 오류가 나는 경우가 가끔씩 있다.

프로젝트 내부에는 문제가 없는데도 불구하고 외부 라이브러리의 타입 정의가 잘못돼서 오류가 나는 경우이다.

이럴 경우 skipLibCheck를 true로 지정하면 tsc에게 .d.ts 파일의 타입 검사를 생략시킬 수 있다.

이렇게 되면 내부 프로젝트에서 정의된 .d.ts 파일까지 검사가 생략돼서 문제가 발생하지 않냐고 할 수도 있다.

내부 프로젝트에서는 .d.ts 파일 정의를 하지 않으면 된다.

.d.ts은 내부용이 아니라 외부용으로 사용되는 게 일반적이다.

일반적인 typescript 프로젝트에서는 type 정의를 .ts 파일에서 하고 export 하고 import 해서 사용하기를 권장한다.

https://velog.io/@sooran/tsconfig.json-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

https://yamoo9.gitbook.io/typescript/cli-env/tsconfig

https://joshua1988.github.io/ts/config/types.html#types-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%9E%80

디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 Typescript 프로젝트의 루트가 된다.

해당 파일은 프로젝트를 컴파일 하는데 필요한 루트 파일과 컴파일러 옵션을 지정할 수 있다.

해당 파일은 Typescript를 이용한 프로젝트를 진행할 때 상당히 중요하다.

그 옵션들과 용도에 대해서 자세히 알아보자.

타입스크립트 변환 명령어를 입력할 때마다 대상 파일의 경로를 지정하지 않고 설정파일에 미리 정의할 수 있다.

{
  "files": ["app.ts", "./utils/math.ts"]
}

files와 같이 파일을 개별로 지정하지 않고 include 옵션으로 변환할 폴더를 지정할 수 있다.

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

TIP

와일드카드 패턴

• *: 해당 디렉토리의 모든 파일 검색

• ? : 해당 디렉토리 안에 파일의 이름 중 한 글자라도 맞으면 해당

• ** : 하위 디렉토리를 재귀적으로 접근(하위 디렉토리의 하위 디렉토리가 존재하는 경우 반복해서 접근)

include와 반대되는 속성으로 변환하지 않을 폴더 경로를 지정

{
  "exclude": ["node_modules"]
}

만약 설정하지 않으면 기본적으로 node_modules나 bower_components같은 폴더를 제외

TIP

컴파일 대상 경로를 정의하는 속성의 우선순위

files > include = exclude

타입스크립트 설정 파일은 기본적으로 node_modules를 제외하지만 써드 파티 라이브러리의 타입을 정의해놓는 @types 폴더는 컴파일에 포함한다.

└─ node_modules
   ├─ @types => 컴파일에 포함
   ├─ lodash => 컴파일에서 제외

그런데 여기서 만약 @types의 기본 경로를 변경하고 싶다면 아래와 같이 지정할 수 있다.

예를 들어서 프로젝트의 루트 디렉터리에 @types/ 디렉터리를 만들었다면

{
  "compilerOptions": {
    "typeRoots" : ["node_modules/@types", "@types"]
  }
}

include에 이미 포함된 곳이라면 굳이 추가해줄 필요가 없다.

대부분이 잘못 알고 있는 것 중 하나가 프로젝트 내에서 type 파일을 만들게 되면

typeRoots에 추가해야 한다고 알고 있는데 include에 포함돼 있는 .d.ts 파일은

자동으로 typescript가 인식하므로 넣어줄 필요가 없다.

특정 타입스크립트 설정 파일에서 다른 타입스크립트 설정의 내용을 가져와 추가할 수 있는 속성이다.

// config/base.json
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

확장한 파일의 내용을 가져다가 덮어쓰거나 새로 정의할 수도 있다.

타입스크립트 파일을 컴파일 했을 때 빌드 디렉토리에 생성되는 자바스크립트의 버전을 의미힌다.

기본 값인 es3부터 es5, es6 등 가장 최신 버전인 esnext까지 있다.

// tsconfig.json
{
  "target": "esnext"
}

타입스크립트 파일을 자바스크립트로 컴파일 할 때 포함될 라이브러리의 목록이다.

이 속성을 활용하는 가장 대표적인 사례는 async코드를 컴파일 할 때 Promise객체가 필요하므로 아래와 같은 설정을 해줘야 한다.

// tsconfig.json
{
  "lib": ["es2015", "dom", "dom.iterable"]
}

여기서 es2015는 프로미스 객체를 타입스크립트에서 인식할 수 있게 필요한 속성이고, dom 관련 속성은 DOM API를 사용하는 경우 필요하다.

files와 include를 통해서 선택된 파일들의 결과문이 저장되는 디렉터리를 outDir을 통해서 지정할 수 있다.

만약 타입 체크용으로 사용한다면 필요가 없다.

outFile이라는 속성도 있는데, 이는 모든 파일을 하나의 파일로 합쳐서 출력할 경우 지정하는 파일명이다.

module이 none, system 또는 amd가 아닌 경우 사용할 수 없다.

noEmit을 true로 설정하면 최종결과물이 나오지 않게 된다.

이를 통해서 단순 타임 체크용으로 사용할 것인지 아니면 tsc를 컴파일용으로 사용할 것인지 지정할 수 있게 된다.

declaration을 true로 설정하게 되면 해당 .ts 파일의 .d.ts 파일 또한 같이 출력물에 포함되게 된다.

declaration 파일들만 따로 출력하게 하고 싶다면 declarationDir로 별도 지정해 줄 수 있다.

emitDeclarationOnly가 true라면 출력물에 declaration 파일만 나오게 된다.

noEmit과 같이 사용할 수 없다.

sourceMap을 true로 지정하면 출력물에 .js.map 이나 .jsx.map 파일을 포함된다.

inlineSourceMap을 true을 지정하면 .js 파일 내부에 source map이 포한된다.

두 속성은 같이 사용할 수 없다.

strict를 true로 지정하면 typescript의 type 검사 옵션 중 strict* 관련된 모든 것을 true로 만들게 된다.

strictFunctionTypes, strictNullChecks 등 이와 같은 속성들이 모두 true가 되고 필요에 따라서 선택하여 false로 지정하면 된다.

기본값은 false이며 true로 설정하기를 권장한다.

isolatedModules을 true로 설정하면 프로젝트 내에 모든 각각의 소스코드 파일을 모듈로 만들기를 강제한다.

소스코드 파일에서 import 또는export를 사용하면 그 파일은 모듈이 된다.

만약 import / export를 하지 않으면 그 파일은 전역 공간으로 정의된다.

isolatedModules가 true로 되어 있을 때 모듈로 소스코드를 작성하지 않으면 에러를 출력한다.

만약 babel과 같은 외부 도구를 사용한다면 isolatedModules를 true로 설정하는 것이 좋다.

외부 라이브러리의 모듈을 참조할 경우 .d.ts 파일에 타입 정의가 잘못돼 있어서 오류가 나는 경우가 가끔씩 있다.

프로젝트 내부에는 문제가 없는데도 불구하고 외부 라이브러리의 타입 정의가 잘못돼서 오류가 나는 경우이다.

이럴 경우 skipLibCheck를 true로 지정하면 tsc에게 .d.ts 파일의 타입 검사를 생략시킬 수 있다.

이렇게 되면 내부 프로젝트에서 정의된 .d.ts 파일까지 검사가 생략돼서 문제가 발생하지 않냐고 할 수도 있다.

내부 프로젝트에서는 .d.ts 파일 정의를 하지 않으면 된다.

.d.ts은 내부용이 아니라 외부용으로 사용되는 게 일반적이다.

일반적인 typescript 프로젝트에서는 type 정의를 .ts 파일에서 하고 export 하고 import 해서 사용하기를 권장한다.

https://velog.io/@sooran/tsconfig.json-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

https://yamoo9.gitbook.io/typescript/cli-env/tsconfig

https://joshua1988.github.io/ts/config/types.html#types-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%9E%80