Section 3. TypeScript 컴파일러(및 구성)

📣 강의 내용 정리

𝟭. 시계 모드 사용하기

tsc app.ts --watch
tsc app.ts --w

➰ 변경 사항이 생길 때마다 파일이 저장되고 자동으로 컴파일 된다.
➰ 규모가 큰 프로젝트에서는 사용하지 않는다.

𝟮. 전체 프로젝트 컴파일 / 다수의 파일

tsc --init

➰ 커맨드가 실행되는 폴더의 모든 항목을 알려주는 역할을 한다.
➰ 실행 후 tsconfig.json 파일이 생성되는데, 타입스크립트가 관리해야 하는 파일이 포함된 프로젝트와 모든 하위 폴더를 참고하기 위한 파일이다.

tsc
// 모든 .ts 파일을 컴파일 한다.

tsc --w
// 모든 .ts 파일에 watch 모드를 제공한다.

 

𝟯. 파일 포함 및 제외하기

//tsconfig.json
"exclude" : [
    "제외할 파일 이름"
]

➰ exclude에 있는 파일은 컴파일 되지 않는다.
➰ node_modules를 제외하는데 많이 사용된다 -> node_modules 폴더를 컴파일 하면 계산 과정이 느려진다.
➰ exclude라는 옵션이 있지만, 제외하고자 하는 항목이 node_modules 인 경우 exclude키를 추가할 필요가 없다.
➰ exclude 옵션을 아예 지정하지 않으면 node_modules는 기본 설정상 자동으로 제외된다.

//tsconfig.json
"include" : [
	"포함할 파일 이름"
]

➰ include에 없는 파일은 컴파일 되지 않는다.

𝟰. tsconfig.json 파일 살펴보기

✔️ compilerOptions : 타입스크립트 코드가 컴파일 되는 방식을 관리

➰ target : 타입스크립트 파일이 어떤 버전의 자바스크립트로 컴파일 될지 설정하는 옵션
➰ lib : dom으로 작업을 수행하는 항목들, 기본 객체, 기능, 타입스크립트 노드를 지정하게 해주는 옵션
﹒lib 옵션이 설정되지 않은 경우, 일부 기본 설정이 적용되는데 이는 타입스크립트가 브라우저에서 작동하는 데 필요한 사항들이므로 dom API 등이 포함된다.
➰ allowJs : 타입스크립트가 자바스크립트 파일을 컴파일 하게 해주는 옵션
➰ checkJs : 컴파일은 하지 않더라도 구문을 검사하고 잠재적 에러를 보고하게 해주는 옵션
﹒ 위의 두 옵션은 자바스크립트 파일을 함께 사용하면서 검사하고 싶은 경우에 사용한다.
➰ sourceMap : 디버깅 작업과 개발에 유용한 옵션
﹒ true로 하고 컴파일하면 .js.map 파일이 생성되는데, 입력 파일에 자바스크립트 파일을 연결하는 최신 브라우저와 개발자 도구 간의 다리 역할을 한다.
➰ ourDir : 생성된 파일이 저장되는 위치를 타입스크립트 컴파일러에 알릴 수 있는 옵션
﹒ "./dist"로 작성 후 tsc를 실행하면 자바스크립트 파일이 src폴더가 아닌 dist 폴더에 생성된다.
➰ rootDir : 타입스크립트 파일이 생성될 수 있는 최상위 디렉토리를 정할 수 있는 옵션
﹒ "./src"로 지정하면 모든 ts 파일은 src 폴더 안에 생성해야 한다.
➰ removeComments : 타입스크립트 파일의 모든 주석이 컴파일 된 자바스크립트 파일에서 제거할 수 있는 옵션
➰ noEmit : 자바스크립트 파일을 생성하지 않을 수 있는 옵션
➰ downleveliteration : 반복에 대한 타입스크립트 코드를 이전 버전의 자바스크립트 런타임에서도 문제 없이 수행할 수 있게 하는 옵션
﹒ 루프가 있고 생성된 코드가 해당 루프와 다르게 동작하는 경우에만 사용해야 한다.
➰ noEmitOnError : 타입스크립트 파일에서 에러가 있을 경우 컴파일 하지 않게 해주는 옵션
﹒ ts 파일이 여러 개일 때, 하나의 파일에서 에러가 나면 모든 파일을 컴파일 하지 않는다.

➰ strict : strict 타입 옵션을 설정하는 옵션
﹒얘를 true로 두고 다른 strict 옵션들은 설정하지 않을 경우 모두 true가 된다.
➰ noImplicitAny : 코드에서 우리가 작업하고 있는 매개변수와 값을 명확히 할 수 있도록 하는 옵션
﹒명시되지 않은 타입을 컴파일러가 추론할 때 any로 추론하게 되면 에러를 발생시킨다.
➰ strictNullCheck : null 검사를 비활성화 할 수 있는 옵션
➰ strictFunctionTypes : 함수의 파라미터 타입이 반공변적으로 동작하도록 변경하는 옵션
✚ 공변성 vs 반공변성

✔️ 공변성

let array: Array<string | number> = [];
let stringArray: Array<string> = [];
array = stringArray; // OK
stringArray = array; // Error

➰ string은 string | number의 서브타입이라고 말할 수 있다.

➰ Array<string | number> 역시 Array<string> 을 포함할 수 있는 타입이다.

➰ A가 B의 서브타입이면, T<A>는 T<B>의 서브타입이다 -> T를 공변적이라고 부를 수 있다.

 

✔️ 반공변성

➰ A가 B의 서브타입이면, C<B>는 C<A>의 서브타입이다.

type Logger<T> = (param: T) => void;

let log: Logger<string | number> = (param) => {
  console.log(param); // string | number
};

let logNumber: Logger<number> = (param) => {
  console.log(param); // number
};

log = logNumber; // Error
logNumber = log; // OK

➰ log는 logNumber를 모두 커버할 수 없기 때문에 에러가 난다(log는 string 타입을 커버하지 못한다)

➰ 이 경우 반대로 logNumber가 log의 서브타입이 된다.

➰ strictBindCallApply : function의 내장 함수인 bind, call, apply를 사용할 때 더욱 엄격하게 검사하는 옵션

➰ noImplicitThis : 명시적이지 않은 any 타입으로 this표현식 사용 시 에러를 발생시키는 옵션
➰ noUnusedLocals : 사용되지 않은 지역 변수가 있으면 에러를 발생시키는 옵션
➰ noUnusedParameters : 사용되지 않은 매개변수가 있으면 에러를 발생시키는 옵션
➰ noImplicitReturns : 함수에서 return을 사용하지 않으면 에러를 발생시키는 옵션

𝟱. VScode로 디버깅하기

1️⃣ 크롬 개발자 도구 사용 : sourceMap 옵션을 활성화하면 크롬 개발자 도구 Sources 탭에 변환된 파일이 생성된다.
(Debugger for Chrome 확장 프로그램 이제 사용 불가)
2️⃣ VScode 사용하기 : sourceMap 옵션을 활성화하고 멈추고 싶은 코드에 중단점(빨간 점)을 입력한다 -> Debug 탭에서 Start Debugging을 누른다 -> launch.json 파일에서 실행 방법을 구성할 수 있다 -> 개발 서버가 구동되고 있는 위치인 localhost:3000(나한테는 localhost:3002)로 url을 입력해주어야 한다 -> webRoot는 그대로 둔다 -> 디버깅을 통해 변수를 추적하거나 특정 표현식과 현재의 호출 스택을 확인할 수 있다.

---

💡 새로 알게 된 점

1. tsconfig.json 파일 옵션들의 구체적인 역할
2. 공변성과 반공변성(아직 더 이해가 필요할 것 같다)