TypeScript 학습 체크리스트 - tsconfig.json 용도, 사용법, 주요 옵션

TypeScript 학습 체크리스트 - tsconfig.json 용도, 사용법, 주요 옵션

 

 

TypeScript 강의 수강 후 숙지 및 개념 정리를 위해 체크리스트와 함께 배운 내용을 아래 작성했습니다.

 

 

TypeScript 개념 체크리스트 ✅

 

 

✅ tsconfig.json의 필수 옵션들을 숙지합니다.

 

 

tsconfig.json 이란?

 

 

 

tsconfig.json은 tsc --init 명령어로 만들어지는 파일입니다. TypeScript 프로젝트의 설정 파일로, 주로 프로젝트의 컴파일 옵션 및 입력 파일들을 정의하는 데 사용합니다.

 

 

tsconfig.json 주요 옵션

 

 

compilerOptions - target  옵션

해당 TypeScript 프로젝트 내 코드들이 어떤 JavaScript 버전으로 변환할지 정하는 옵션입니다. es5로 설정하면 CommonJS 버전으로 컴파일되고, es2016(=es7)으로 설정하면 ES2016 버전으로 컴파일 됩니다.

 

최신브라우저는 보통 ES2016을 지원하니 이 설정하기를 추천합니다.

 

 

compilerOptions - module 옵션

TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정. 모듈을 가져오고 내보내는 방식을 결정하는 옵션입니다. target 옵션과는 서로 독립적인 관계이기에 프로젝트의 요구사항에 따라 옵션을 설정하면 됩니다.

 

 

compilerOptions - outDir 옵션

컴파일된 JavaScript 파일이 저장될 출력 디렉토리를 지정하는 옵션입니다. 예를 들어, "outDir": "dist"로 설정하면 컴파일된 파일들이 dist 폴더에 저장하게 됩니다. 

 

 

compilerOptions - strict 옵션

엄격한 타입 검사 옵션을 모두 활성화 하는 옵션으로, TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있습니다. 해당 옵션을 true로 하면 아래 옵션들을 자동으로 true로 설정됩니다.

 

• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• strictPropertyInitialization
• noImplicitAny

 

💡 compilerOptions - strict는 true로 설정하길 권장합니다. 타입스크립트의 엄격한 타입 체크를 강제로 하기 위해서 입니다. 이를 통해 코드의 안정성과 가독성을 향상시킬 수 있습니다.

 

 

compilerOptions - sourceMap 옵션

컴파일된 JavaScrpt 파일에 대한 소스맵을 생성하는 옵션입니다. 소스 맵을 사용하면 실행 중 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인할 수 있습니다. 코드 디버깅 시 큰 도움 되기 때문에 꼭 True를  설정하는 것을 권장합니다.

 

💡compilerOptions - sourceMap도 true로 설정하기 권장합니다. 디버깅을 용이하게 하기 위해서 입니다. 소스맵 설정으로 타입스크립트 코드와 컴파일된 자바스크립트 코드간의 매핑을 제공하여 디버거에서 원본 코드로 쉽게 이동할 수 있기 때문입니다.

 

 

include, exclude 옵션

tsc가 컴파일 할 때 포함하거나 제외할 파일이나 디렉토리를 지정하는 옵션입니다. 

 

• "include":["src/**/*"] - src 디렉토리 및 파일들을 컴파일 하겠다는 뜻입니다.
• "exclude":["node_modules","dist"] - node_modules, dist 디렉토리 밑 파일들을 컴파일에서 제외하겠다는 뜻입니다.

 

그밖의 다양한 옵션은 아래를 참고 바랍니다.

TSConfig Reference - Docs on every TSConfig option

 

▼ 함께 보면 좋은 글 ▼

 

TypeScript 학습 체크리스트 - 컴파일러 개념 및 tsc 용도, 주요 명령어

TypeScript 객체지향 설계 원칙 SOLID 설명, 예시 코드