TypeScript - tsconfig 살펴보기

ryan·2022년 6월 16일
0

참고자료

exclude / include / files

lib

  • dom으로 작업을 수행하는 항목들. 기본 객체, 기능, 노드를 지정하게 해주는 옵션.
  • target 설정값을 기준으로 기본 설정이 되어 있음.

outDir

  • 루트 경로에 있는 프로젝트 폴더에는 파일을 넣지 않음.
  • 보통 src폴더에서 파일을 관리하게 되는데, outDir을 사용하여 경로를 설정하면 컴파일된 파일이 저장됨.
  • src내 폴더 구조가 있는 경우 그 구조도 함께 복사됨.

rootDir

  • 입력 파일이 있는 위치를 설정할 수 있음
    (상위 경로에 ts가 있는 경우 상위 폴더 구조가 그대로 복제되기 때문에)

allowJs, checkJs

ts를 사용하지 않고 일부 기능의 장점만 취하고자 할 떄 유용함
vanilla script파일과 ts파일을 함께 사용하는 프로젝트에서 사용하면 좋음

  • allowJs : TS가 JS파일을 컴파일 할 수 있도록 해주며 파일이 .ts로 안 끝나더라도 컴파일할 수 있음.
  • checkJs : 사용하면 ts가 컴파일을 수행하지 않더라도 구문을 검사하고 잠재적 에러를 보고해줌.

sourceMap

  • 디버깅 작업과 개발에 유용
  • 값을 true로 설정하면 .js.map 파일이 생성되고, 브라우저 개발자 도구의 source에서 ts파일도 확인할 수 있음.

removeComments

  • ts 파일의 모든 주석을 삭제하고 컴파일함

noEmit

  • js파일을 생성하지 않고 ts파일만 확인하고 싶은 경우, 큰 프로젝트에서 파일을 출력하지 않고도 ts컴파일러가 파일을 검사하고 잠재적 에러를 보고하도록 할 수 있게 해줌.

downlevelIteration

  • 코드를 이전 버전의 js로 컴파일하고 for loop로 작업하면 컴파일이 제대로 작동하지 않을 수 있음. 설정을 해놓으면 정확도가 올라가지만 js코드가 상세하게 작성되기 때문에 의도한대로 loop가 작동하지 않을 때 사용.

noEmitOnError

  • default는 false임.
  • 에러가 발생하더라도 ts는 js파일을 생성하는데, 위 설정을 true로 설정하면 에러가 발생한 ts파일은 생성되지 않음.

Strict option

noImplicitAny

  • 코드에서 작업하고 있는 매개변수와 값을 명확히 할 수 있도록 해줌
    false로 설정할 경우의 예시로 function (param){}에서 param에 타입을 지정하지 않아도 에러가 발생하지 않음.

strictNullChecks

  • null 값을 잠재적으로 가질 수 있는 값에 접근하고 작업하는 방식을 엄격하게 평가함. (dom요소를 지정할 때 등)
  • 아래와 같이 느낌표 연산자를 사용하면 해당 값이 null이 아님을 ts에게 전달할 수 있음
document.querySelector('button')! 

strictBindCallApply

  • bind call apply를 사용하는 경우, 무엇을 사용했는지 확인하고 맞는 함수를 작성했는지 검사함.
function click (message:string){
    console.log('click'+ message)
}
button.addEventListener('click',click.bind(null)) // error

function click (){
    console.log('click')
}
button.addEventListener('click',click.bind(null)) // 정상작동

코드 품질

noUnusedLocals

  • 사용하지 않은 지역 변수나 전역 변수를 검사해서 에러로 표기함.

noUnusedParameters

  • 사용하지 않은 매개변수를 검사해서 에러로 표기함.

noImplicitReturns

  • 리턴하거나, 리턴하지 않음이 공존하는 함수를 검사함.
profile
프론트엔드 개발자

0개의 댓글