타입스크립트의 규칙 (tsconfig.json)

 

 

lib

---

 

lib 

 

DOM으로 작업을 수행하는 항목들에 타입스크립트 노드를 지정하게 해주는 옵션

 

 

button에 왜 에러 표시줄이 뜰까? button을 진짜 찾은 것인지의 여부를 타입스크립트가 확신하지 못하기 때문이다.

 

 

이렇게 라인의 끝에 느낌표를 붙여 해결해줄 수 있다. '느낌표'는 버튼이 존재하니 걱정하지 말라고 타입스크립트에게 알려주는 것이다.

 

 

Q:

 

그럼 document에는 왜 에러가 발생하지 않을까? querySelector라는 메서드를 가지고 있다는 것은 또 어떻게 아는 걸까?

버튼이 addEventListener 메서드를 가지고 있다는 것은 또 어떻게 알고?? 

 

 

 

 

 

 

 

 

---

 

 

A:

 

바닐라 자바스크립트에서는 이것들을 당연하다고 여길 수 있다. 타입스크립트에서는 무조건적으로 브라우저만을 위한 작업을 하는 것은 아니다. 만약 node.js 애플리케이션 코드를 작성한다면 위와 같은 메서드들은 당연히 작동하지 않을 것이다.

 

이걸 타입스크립트가 알아서 처리해줄 수 있는 건 lib 옵션 덕분이다.

기본적으로 tsconfig.json에서 lib 옵션은 설정이 안 돼 있는데, 이럴 경우 기본 설정은 자바스크립트의 target에 따라 달라진다.

target을 ES6로 설정한 경우, 기본적으로 es6에서 전역적으로 사용 가능한 모든 기능이 포함된다. 여기에는 당연히 모든 domAPI도 포함된다.

 

 

---

 

 

lib 옵션이 설정되지 않은 경우, 일부 기본 설정이 적용된다.

lib 옵션의 주석 처리를 해제할 경우 기본 설정이 더 이상 적용되지 않아 컴파일 시에 많은 오류가 발생할 것이다.

(console.log 조차 모른다.)

 

target이 "ES6" 인 경우, lib의 기본 설정은 아래와 같다.

 

 

lib 설정을 변경하는 유일한 이유는 '브라우저에서 실행되지 않는 프로젝트'에서 기본으로 포함된 dom을 제거하기 위함이다.

 

 

 

sourceMap

---

sourceMap은 출력 파일의 내용이 원본 소스 파일과 어떻게 일치하는지에 대한 설명이다. 소스 맵은 출력 파일을 탐색할 때 디버거 같은 개발자 도구에서 원본 소스 코드를 표시하도록 설정한다.

 

 

타입스크립트 코드 자체를 브라우저 상에서 디버깅하고 싶을 때는 어떻게 해야 할까?

tsconfig.json 파일의 컴파일러 옵션 중 sourceMap을 주석 해제하면 된다.

 

 

이렇게 주석을 해제하고 컴파일하면

 

 

.map 파일이 생성된 것을 확인할 수 있는데, 이것들이 다리 역할을 하는 덕분에 브라우저 상에서 ts 파일을 디버깅할 수 있게 된다.

 

 

 

 

outDir, rootDir

---

 

outDir, rootDir

 

 

 

 

Strict

---

기본값은 true. 아래 나올 옵션들은 모두 타입스크립트에서 기본적으로 적용되고 있다.

 

 

1. strictNullChecks

 

strictNullChecks 플래그를 비활성화하면 코드의 모든 타입에 null | undefined가 추가되고, 모든 변수가 null 또는 undefined를 받을 수 있도록 허용한다.

 

// strictNullChecks가 활성화된 경우, string 타입인 value에 null을 할당하면 타입 오류가 발생

let value: string;

value = "abc123";	// OK
value = null;
// strictNullChecks가 활성화된 경우 발생하는 오류
// ~~~
// Error: Type 'null' is not assignable to type 'string'.

 

타입스크립트에서 DOM을 사용하는 경우, 원하는 엘리먼트가 HTML에 있는지 없는지(null) 알 수 없기 때문에 에러를 발생시킨다.

 

만약 strictNullChecks 옵션을 false로 설정할 경우, 

 

 

이 코드에서 맨 뒤에 느낌표를 제거한다고 해도 에러가 발생하지 않는다. button 이 null 이어도 상관없다는 의미.

strictNullChecks 옵션은 잠재적으로 null 값을 가질 수도 있는 값에 접근할 때 매우 strict한 규칙을 적용한다. 

 

strictNullChecks 옵션이 false인 상태에서 HTML 상에 버튼이 없는데 selector로 버튼을 가져오려고 해도 타입스크립트는 에러를 발생시키지 않는다. 하지만 런타임에서 에러가 발생한다. 이는 버그를 찾아내는 데 있어 비효율적이다.

 

 

2. noImplicitAny

 

타입스크립트가 매개변수 또는 속성의 타입을 유추할 수 없는 경우라면 any 타입으로 가정한다. any 타입은 타입스크립트의 타입 검사를 대부분 우회할 수 있으므로 코드에서 이러한 암시적 타입을 허용하지 않는 것이 좋다.

 

noImplicitAny 컴파일러 옵션은 암시적 any로 대체될 때 타입스크립트에 타입 검사 오류가 발생하도록 지시한다.

 

 

위 코드에서는 매개변수의 데이터 유형에 대한 어떤 정보도 타입스크립트에 제공되지 않는다. 미리 추론할 수 있다면 상관없겠지만 함수가 호이스팅 되어 있기 때문에 타입스크립트는 함수의 매개변수 'data'의 타입을 먼저 읽으려 한다. 따라서 함수가 선언되는 시점에는 어떤 데이터가 들어오게 될지 알 수 없다.

 

매개변수의 타입을 선언함으로써 이 에러를 해결할 수 있다.

 

 

 

3. strictBindCallApply

 

 

 

clickHandler 자리에는 함수가 와야하므로 clickHandler('Hello World') 같은 방식으로 작성할 수는 없다.

이럴 때 bind 메서드를 활용할 수 있다. bind의 첫 번째 인자는 this로 삼을 객체이다. 여기서는 함수 복사만을 위해 bind를 사용하는 것이므로 null에 결합시킨다.

 

 

null을 넣으면 에러표시줄이 뜨게 되는데, 이 에러는 strictBindCallApply 옵션을 false로 설정하면 없앨 수 있다.

이 옵션의 기능은 기본적으로 호출하려는 함수가 bind, call, apply 중 무엇에 해당하는지 확인하고 그 함수를 제대로 설정했는지를 확인한다. 그리고 사용하는 함수가 인수를 필요로 하는지의 여부 또한 판단한다. 위 코드에서는 string 타입의 인수를 필요로 하므로 에러가 발생한 것이기에 인수를 두 번째 파라미터에 넣어주면 에러는 사라지게 된다.

 

 

 

+ 화살표 함수를 써서 에러를 방지할 수도 있다.

 

 

 

 

 

 

Additional Checks

---

noUnusedLocals: 사용되지 않은 변수가 있으면 안 된다.

noUnusedParameters: 사용되지 않은 매개변수가 있으면 안 된다.

noImplicitReturns: 함수 내에서 일부만 리턴할 수 없다. ( ex. if 문에 걸린 것만 리턴 )