본문 바로가기
Otter's [ 개발새발 ]/# 프론트엔드 공부 - Typescript

[Typescript] 22.11.04 tsconfig.json 해석

by byeonPig 2022. 11. 4.

[ 내용 ]

 

tsconfig.json 파일

1-1. compilerOptions: tsc 명령 형식에서의 옵션


평소 모르던 와일드 카드가 등장해 조사를 해봤다!

 와일드 카드 패턴

 * : 해당 디렉토리의 모든 파일 검색
 ? : 해당 디렉토리 안에 파일의 이름 중 한 글자라도 맞으면 해당
 ** : 하위 디렉토리를 재귀적으로 접근(하위 디렉토리의 하위 디렉토리가 존재하는 경우 반복해서 접근)

출처

 

tsconfig | 타입스크립트 핸드북

타입스크립트 설정 파일 (tsconfig.json) 타입스크립트 설정 파일은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일입니다. 프로젝트에서 tsc라는 명령어를 치면 타입스크립트

joshua1988.github.io

1-2. include: 컴파일 할 대상의 경로

 

2. compilerOptions 오브젝트 내 키들

 

(1) module: TS 소스코드가 컴파일 되어 만들어진 JS코드는 웹, 노드제이에스 양쪽에서 동작해야한다. 근데 그 둘의 동작방식이 다르다. 그래서 각 환경, 즉 플랫폼에 맞게 컴파일 하려는 목적으로 설정

웹 -> AMD(asynchronous module definition) 방식
("module": "amd" )

node.js -> commonJS 방식
("module": "commonjs" )

(2) moduleResolution

module의 키값

commonjs → "moduleResolution": "node"

amd → "moduleResolution":  "classic"

(3) target: 트랜스파일할 대상 JS의 버전 설정, 대부분 es5를 사용하나 최신 node.js 사용 시 es6도 사용

 

(4) baseURL: tsconfig 내 다른 option들의 기본이 되는 경로, tsconfig 파일이 존재하는 디렉토리가 기본이 된다. 때문에 "."로 설정

 

(5) outDir: 빌드된 결과가 저장될 위치, 해당 디렉토리가 존재하지 않을 경우 생성 후 빌드

 

(6) paths: 소스파일의 import 문에서 from 부분을 해석할 때 찾아봐야하는 디렉터리 설정

 

자세한 내용은 다음 게시글의 (2-2) 외부 패키지 import 파트를 참고하자!

 

[Typescript] 22.10.26 타입스크립트 모듈, import, export

[ 내용 ] 2-2. 모듈 이해하기 (1) 모듈: 각각의 ts파일들 위 예제의 경우 모듈을 2개 만든 것이라고 생각하면 된다. 코드 관리와 유지 보수를 편하게 하려고 모듈마다 고유한 기능 구현하는 방식으로

otteria.tistory.com

(7) esModuleInterop: 오픈소스 자바스크립트 라이브러리 중 웹 브라우저 플랫폼에서 동작한다느 가정으로 만들어진 것들이 있다. 이들은 commonJS 방식으로 동작하는 타입스크립트 코드에 혼란을 줄 수 있다. 이 키를 true로 설정해 동작할 수 있게 한다.

(chance 패키지가 이 경우에 해당된다.)

 

(8) sourceMap: 해당 JS파일이 어느 TS의 어디에 해당하는지 알려준다. 주로 디버깅시 사용한다.

 

(9) noImplicitAny: TS의 경우 타입을 명시하지 않을 경우 any 타입을 설정한 것으로 간주한다. 이런 코드에 대해 에러를 표시할지 결정.

 

[ 리뷰 ]

공부 좀 정신차려서 열심히 하자!

 

요거 사서 공부해보는 중인데... 좋은 것 같다. 어느정도 강제성이 필요한 내가 눈치보며 공부하게 된다!

 

꾸준히 열심히!