[타입스크립트] 컴파일러 환경설정

tsconfig.json

• 타입스크립트를 자바스크립트로 변환해줄 컴파일러의 환경설정을 할 수 있다.
• tscongig.json 생성

 npx tsc --init

주요 컴파일러 옵션(compilerOptions)

1. target

• 어떤 버전의 ECMAScipt로 타입스크립트를 자바스크립트로 컴필레이션 할 건지 특정할 수 있다.
• 기본값은 "es5"이다
• let/const => var로 바꾼다.
• 장점은 typescript를 써도 오래된 브라우저에서 쓸 수 있도록 할 수 있다.

2. lib

• 타입스크립트를 자바스크립트로 컴파일할 때 포함될 라이브러리 목록을 지정할 수 있다.
• 따로 설정하지 않으면 target에서 지정한 ECMAScript에 따라 기본값이 정의된다.
• 예를 들어 target에 "es5"를 지정했다면 타입스크립트가 es5의 모든 기능을 전역적으로 사용할 수 있다는 것을 안다. DOM API같은 경우를 예로 들 수 있다.

const button = document.querySelector('.button')!;

button.addEventListner('click', () => {
	console.log('클릭!')
});
// 타입스크립트가 button이 정말 있는지 모르기 때문에 에러를 표시한다. 
// !를 추가해 주는데 타입스크립트에게 직접 요소를 확인했으니 에러를 표시하지 말라는 사인이다.

• document는 js의 문법적 기능이 아니다. 타입스크립트는 브라우저를 위해서만 만들어 지지 않았다. 만약 node에서 document를 쓰려한다면 에러가 발생한다.
• 그런데 document에 대해서 타입스크립트가 에러를 발생시키지 않는다.
• 타입스크립트는 DOM API가 자바스크립트의 문법이 아니라는 것을 알지만 위에서 에러가 발생하지 않는것은 target에 지정한 es5에 DOM API가 포함되어 있기 때문이다.
• 만약 일일히 지정해 주고 싶다면 포함할 라이브러리를 직접 지정해야 한다.

"lib" = [
	"dom",
	"es6",
    "dom.iterable",
    "scripthost"
]

• unlock all js features we would want to work = es6

3. allowJS, checkJS

• 자바스크립트 파일을 컴필레이션 과정에 포함할건지 설정할 수 있다.
• allowJS: 자바스크립트 파일을 컴파일에 포함
• checkJS: 자바스크립트 파일이 컴파일 되지는 않지만 syntax를 체크한다. 잠재적 오류를 잡아낼 수 있다. 타입스크립트를 사용하지는 않지만 타입스크립트의 기능을 조금 사용하고 싶을 때 유용하다.

4. jsx

• react를 사용할 때 설정

5. sourceMap

• 개발과정에서 디버깅이 필요할 때 설정한다.
• 자바스크립트로 컴파일하기 전에 타입스크립트 코드를 디버깅하고 싶을 때 sourceMap을 true로 설정한다
• 설정 후 컴파일하면 파일이름.js.map라는 파일이 컴파일 된 타입스크립트 파일마다 생성이 된다.
• 이 파일은 모던 브라우저에서 읽을 수 있는데 개발자 도구에 source 탭에서 타입스크립트 파일도 디버깅할 수 있다.

6. outDir, rootDir

• 컴파일할 폴더(타입스크립트 파일이 있다)와 컴파일된 자바스크립트 파일(자바스크립트 파일이 있다)의 폴더를 지정해줄 수 있다.
• outDir: 컴파일 된 자바스크립트 파일이 있을 폴더를 지정한다.

"outDir": "./dist"

• 만약 src가 타입스크립트 파일이 있는 폴더이고 src폴더에 하위 폴더가 있어도 그대로 dist 폴더에 폴더 구조를 유지한 채 컴파일 된다.

• rootDir: 컴파일을 시작하는 루트 폴더를 지정한다.

"rootDir": "./src"

7. removeComments: true

• 컴파일될 때 코멘트 코드 없애준다.

8. noEmit: true

• 컴파일러가 에러만 체크하고 자바스크립로 컴파일 하지는 않는다.

9. downlevelIteration

• 만약 오래된 ECMAScript로 컴파일 할 때 for 반복문의 경우 컴필레이션이 제대로 되지 않을 수도 있다.
• for 반목문이 정상적으로 동작하지 않을 때 더 정확한 코드로 컴필레이션한다.
• 코드가 장황해지기 때문에 필요할 때만 command in해준다.

10. noEmitOnError: true

• 기본값은 컴파일 과정에서 타입스크립트가 에러를 감지해도 자바스크립트 파일이 만들어 지는데 위 설정을 true로 설정하면 자바스크립트 파일을 만들지 않는다.
• 에러가 있는 해당 파일만 만들어지지 않는 것이 아니라 모든 파일이 만들어지지 않는다.

11. strick

• 엄격모드를 사용할 건지 설정한다.
• true 일 경우 모든 세부적 옵션이 기본값으로 설정된다.

11-1. noImplicitAny: false

• 기본값은 함수의 파라미터의 타입을 지정해 줘야된다.
• 변수는 지정하지 않아도 에러가 발생하지 않는데 타입스크립트가 변수의 할당된 값을 추적하기 때문이다.
• noImplicitAny가 false일 경우 파라미터의 타입을 지정하지 않아도 에러가 발생하지 않는다.

let logged;
// type은 any

function send(data: string){
	logged = true
	//type은 boolean
}
send("success")

11-2. strictNullChecks: false

• 기본값으로 변수나 상수에 할당된 값이 잠재적으로 null일 수 있으면 에러가 발생한다.

const button = document.querySelector('button')

• 위에에서는 !를 붙여서 에러를 없앴다.
• 그러나 false일 경우 null일 수 있을 경우 에러를 발생시키지 않는다.
• 더 정확하게 체크하려면 if문으로 감싸주면 된다.
• !를 안붙여도 되는데 타입스크립트가 if문으로 button을 체크하는 것을 알기 때문이다.

const button = document.querySelector('button')

if(button){
	button.addEventListner('click', () => {
    	console.log('Clicked')
    }
}

additional checks

• for code quality

• 기본적으로 사용하지않은 변수가 있으면 타입스크립트는 경고 한다

• noUnusedLocals

• noUnusedParameters

• noImplicitReturns