TypeScript 강의 정리: TS컴파일러

1. Watch mode(개별 파일 컴파일)

• 파일을 수정할 때마다 일일이 컴파일해주기 귀찮으니까 파일을 수정하고 저장할 때마다 알아서 컴파일해주도록 도와주는 모드
• tsc 파일.ts -w
• 파일별로 일일이 사용해줘야 되므로 대형 프로젝트에는 적합하지 않다.

2. 전체/다수 파일 컴파일

• 프로젝트 폴더 위치(경로 꼭 확인)에서 'tsc --init'을 입력하면 tsconfig.json 파일이 생성된다. -> 여러개의 파일을 수정하고 'tsc'를 입력하면 모든 TS파일들이 컴파일된다.
• tsconfig.json 파일은 해당 프로젝트 내에 있는 TS 파일들의 컴파일 방식 등을 설정해주는 역할을 한다.
• 'tsc -w' watch 모드와 결합하여 사용 가능하다.

3. 컴파일 대상 파일 설정하기

1) exclude

• tsconfig.json 파일에서 컴파일하지 않을 폴더를 지정한다.
• node_modules는 자동으로 제외 처리가 되는 폴더이기 때문에 굳이 따로 설정하지 않아도 된다.

2) include

• tsconfig.json 파일에서 컴파일할 대상 폴더들을 따로 설정한다(include에서 설정하지 않을 폴더는 컴파일되지 않는다).
• include와 exclude를 함께 설정하면 exclude를 제외한 채로 include 리스트를 컴파일한다.

3) files

• tsconfig.json 파일에서 컴파일할 대상 파일들을 따로 설정한다.
• include와 기능적으로 흡사하지만 대상이 '파일'이라는 것이 차이점이다.

/*----- tsconfig.json -----*/
{
  "compilerOptions": {
	//생략
  },
  "exclude": [
    node_modules  // default exclusion
  ],
  "include": [
  ],
  "files": [
  ]    
}

4. compilerOptions

1) target: 컴파일되는 JS의 버전을 설정

• JS의 버전이 'es5'일 경우 모든 유형의 코드가 컴파일되었다는 것을 의미 -> 이전 브라우저에서 작동하던 코드들까지 소화할 수 있다.
  ex) target이 es5일 때 const와 let으로 선언한 변수들은 모두 var로 변환된다.
• JS 버전이 최신일수록 코드가 더 간결해진다.
• 입맛과 상황에 맞게 설정한다.

2) lib: dom으로 작업을 수행하는 항목들(ex. 기본객체, 기능, TS 노드) 지정해주는 옵션

• lib 옵션이 주석 처리되어 있을 때는 target에서 설정한 JS버전에서 전역적으로 사용 가능한 모든 기능이 자동으로 포함된다.

3) allowJS/checkJS: TS가 JS파일을 컴파일할 수 있도록/컴파일을 수행하지 않더라도 구문을 검사하고 잠재적 에러를 보고해주도록 하는 옵션

• TS를 사용하지 않고 일부 기능의 장점을 취하고자 할 때 유용하다. -> TS를 전혀 사용하지 않거나 TS 파일과 JS 파일이 혼재하는데 JS파일도 함께 검사하고 싶은 경우

4) sourceMap:

• 디버깅 및 개발할 때 유용한 옵션이다.
• sourceMap을 true로 설정하면 ~.js.map 형식의 파일들이 생기는데 이는 입력파일에 JS파일을 연결하는 최신 브라우저와 개발자 도구 간의 다리 역할을 한다. -> 개발자 도구 sources에서 .ts 파일도 함께 확인이 가능하게 해주며 디버깅 프로세스를 한단계씩 진행하며 보여준다.

5) outDir: 컴파일 후 생성되는 js파일을 보관하는 위치를 설정하는 옵션

6) rootDir: 컴파일되는 폴더를 설정하며(include와 유사), dist(outDir 설정 폴더) 폴더에서도 구조가 유지되는지까지 확인하는 옵션

• rootDir: "./src"로 설정하면 src 폴더와 dist 폴더를 동위에 두고 그 아래 구조가 똑같이 생성된다.

7) removeComments: TS파일에서 작성해놓은 모든 주석이 JS파일에서 제거하는 옵션

8) noEmit: JS 파일을 생성하지 않고도 TS 컴파일러가 파일을 검사하고 잠재적 에러를 보고할 수 있도록 하는 옵션

9) downlevelIteration: 이전 버전 JS로 코드를 컴파일하고 for 루프로 작업하면 드물게 컴파일이 제대로 작동하지 않는 경우가 있는데 이와 같은 경우를 더 정확히 컴파일할 수 있도록 돕는 옵션

• 내가 작성한 의도와 다르게 루프가 진행되는 경우에만 해당 옵션을 켜야한다.

10) noEmitOnError: TS 파일에 오류가 있는 경우 JS파일을 생성하지 않도록 하는 옵션

11) strict: strict과 관련된 모든 옵션을 활성화시키는 옵션

• 모든 옵션을 활성화시킬 필요가 없을 경우, strict: false로 설정하고 개별 옵션을 활성화하면 된다.

(1) noImplicitAny: 파라미터(일반변수 X) 값에 데이터 타입이 지정 안되어 있는 것을 허용하지 않는 옵션
(2) strictNullChecks: null이나 undefined를 허용하지 않는 옵션

• 예를 들어, html 파일에서 버튼을 생성해놓지 않았는데 TS 파일에서 button 객체를 호출하는 경우 null 값이 뜨게 된다. TS는 html 파일을 확인하지 않기 때문에 이를 그냥 넘어가는데 해당 옵션이 활성화되어 있으면 이를 null로 인식해 에러가 나게 된다.

const buttom = document.querySelector("button")!;  // !를 입력해서 해당 내용이 반드시 있을 거라는 표시를 주거나

if(button){  // if 조건문으로 해당 내용이 있을 때만 코드를 실행하라고 해주어도 된다.
  button.addEventListner("click", () => {
    console.log("Clicked!");
  });
}

(3) strictFunctionTypes: 파라미터와 반환값에 대해 함수가 어떻게 표시되는지를 정의하는 옵션
(4) strictBindCallApply: 호출하려는 함수가 bind, call, apply 중 무엇에 해당하는지 확인하고, 함수를 제대로 설정했는지 확인하는 옵션 -> 결합한 내용이 원함수에서 요구한 것과 다를 시 이를 체크한다고 우선 이해했으나 정확히 잘 이해 못했음!
(5) alwaysStrict: strict모드를 사용하여 생성되는 JS 파일이 추가되도록 하는 옵션 -> JS 파일 상단에 "use strict"라고 써져 있다.

12) 코드품질 향상 옵션

(1) noUnusedLocals/noUnusedParameters: 지역변수(전역변수는 X)/파라미터가 사용되지 않았을 때 알려준다.
(2) noImplicitReturns: 어떤 경우에서라도 함수의 반환값이 있도록 하는 옵션

function add(n1: number, n2: number) {
	if( n1 + n2 > 0 ){
      return n1 + n2;
    }
}  // not okay with noImplicitReturns

function add(n1: number, n2: number) {
	if( n1 + n2 > 0 ){
      return n1 + n2;
    }
  	return;
}  // okay with noImplicitReturns