타입스크립트 스터디 - 4

노요셉·2021년 3월 26일

tsconfig.json

https://typescript-kr.github.io/pages/tsconfig.json.html

디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 Typescript 프로젝트의 루트가 됌.
tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일 옵션을 지정할 수 있음.

입력파일 없이 tsc 호출하면 컴파일러는 tsconfig.json 파일이 포함된 디렉토리 경로 또는 설정이 포함된 유효한 경로의 .json 파일 경로를 지정하는 --project (또는 -p) 커맨드 라인 옵션을 사용할 수 있음.

tsconfig reference

https://www.typescriptlang.org/tsconfig

outDir
CompilerOptions에 outDir를 정해두면 컴파일되고 지정한 디렉토리로 file이 들어갈 것임.
paths
paths를 쓰려면 baseUrl이 명시되어야 하고,
상대적 경로를 사용해서 쓸 수 있음.
https://www.typescriptlang.org/tsconfig#paths

extends를 이용한 설정 상속하기

https://stackoverflow.com/questions/52147201/angular-6-declare-path-for-library-in-tsconfig-lib-json

tsconfig.json 여러개 만들어서 프로젝트 구성

공통으로 사용하는 모듈의 경우 common 모듈 하나 만들어서 사용할 수 있음.
https://stackoverflow.com/questions/60896829/monorepo-with-rootdirs-produces-unwanted-sudirectories-such-as-src-in-outdi/61513685#61513685

프로젝트 구조는 다음과 같다면

├── dist
└── src
    ├── tsconfig.json
    ├── shared
    │   ├── index.ts
    │   └── tsconfig.json
    ├── backend
    │   ├── index.ts
    │   └── tsconfig.json
    └── frontend
        ├── index.ts
        └── tsconfig.json

컴파일 후 이런 구조가 될 것임.

.
├── dist
│   ├── shared
│   ├── backend
│   └── frontend
└── src

shared 모듈을 임포트할때는
tsconfig.json에 다음과같이 paths를 지정해서 import 할때는 설정한 상대경로로부터 읽어오게함.

"baseUrl": ".",
"paths": {
  "@ProjectName1/*": ["../projects/ProjectName1/src/app/modules/*"],
  "@Projectname2/*": ["../projects/Projectname2/src/app/modules/*"],
}

https://stackoverflow.com/questions/52147201/angular-6-declare-path-for-library-in-tsconfig-lib-json