tsconfig.json?
- onfig.json이란?
tsc --init명령을 실행하면 생성되는 파일입니다!- tsconfig.json은 TypeScript 프로젝트의 설정 파일이라고 생각하시면 되어요!
- 주로 프로젝트의 컴파일 옵션 및 입력 파일들을 정의하는데 사용되어요!
- tsconfig.json 주요 옵션
- 1) 옵션 매뉴얼
- 2)
compilerOptions - target옵션
- 당 TypeScript 프로젝트 내 코드들이 어떤 JavaScript 버전으로 변환을 할 지 정하는 옵션이에요!
es5로 설정하면 CommonJS 버전으로 컴파일되구요!es2016(=es7)로 설정하면 ES2016 버전으로 컴파일이 됩니다!- 최신 브라우저는 보통 ES2016을 지원하니 이렇게 설정하시는 것을 추천드려요!
- 단, 이것을 정할 때는 TypeScript가 어느 환경에서 실행이 되어야하는지를 고려하셔야 해요!
- 만약, 내가 만든 프로젝트가 생각보다 레거시한 환경에서 동작해야 된다면? → es5
- 그렇지 않다면 → es2016
- 3)
compilerOptions - module옵션- TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정합니다!
- 모듈을 가져오고 내보내는 방식을 결정하는 옵션이라고 생각하시면 됩니다!
- target 옵션과는 서로 독립적인 관계니 프로젝트의 요구사항에 따라 옵션을 설정하시면 됩니다!
- 4)
compilerOptions - outDir옵션- 컴파일된 JavaScript 파일이 저장될 출력 디렉터리를 지정합니다!
- 예를 들어,
"outDir": "dist"로 설정하면 컴파일된 파일들이dist폴더에 저장되죠!
- 5)
compilerOptions - strict옵션- 엄격한 타입 검사 옵션을 모두 활성화하는 옵션이에요!
- TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있어요.
- 해당 옵션을 true로 설정하면 아래의 옵션들이 자동으로 true로 설정이 되어요.
strictNullChecks- 잠재적으로 null(undefined)이 될 수 있는 값들에 대해서 엄격하게 확인하는 옵션이에요!
strictFunctionTypesstrictBindCallApplystrictPropertyInitializationnoImplicitAny- 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로
any타입을 부여하지 않도록 해요. - 이 옵션을 활성화하면 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언할 수 있죠!
- 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로
noImplicitThisalwaysStrict
- 당연하게도, 해당 옵션은 꼭 true로 설정하시는 것을 권장드려요.
- 6)
compilerOptions - sourceMap옵션- 컴파일된 JavaScript 파일에 대한 소스 맵을 생성하는 옵션이에요!
- 소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인할 수 있죠.
- 코드 디버깅에 매우 큰 도움이 되기 때문에 개발 환경에서는 꼭 true로 설정하시는 것을 권장드려요.
- 프로덕션 환경에서는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수 있어요!
- 7)
include,exclude옵션- tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션이에요!
- “include": ["src/*/"]
- src 디렉토리 밑의 친구들을 컴파일 하겠다는 의미에요!
- "exclude": ["node_modules", "dist"]
- node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외하겠다는 의미에요!
이 밖에도 정말 많은 옵션이 있으니 프로젝트 구성에 필요한 부분들은 찾아서 적용하시면 됩니다! 다음 강의에서는 VS Code와 같은 편집기에서 타입 추론을 할 수 있게 도와주는 @types 라이브러리에 대해서 알아볼게요!
응애