이 시리즈는 댄 밴더캄이 쓴 책인 Effective Typescript를 번역한 이펙티브 타입스크립트를 읽고 공부를 위해 정리한 책입니다.
아이템 2. 타입스크립트 설정 이해하기
타입스크립트는 거의 100개에 달하는 설정을 가지고 있습니다. 설정을 어떻게 하냐에 따라 코드가 타입 체커를 통과하는지 안하는지가 결정됩니다.
function add(a,b) {
return a + b;
}
add(10, null);linux> tsc --noImplicitAny ex1.ts
ex1.ts:3:14 - error TS7006: Parameter 'a' implicitly has an 'any' type.
3 function add(a, b) {
~
ex1.ts:3:17 - error TS7006: Parameter 'b' implicitly has an 'any' type.
3 function add(a, b) {
~
Found 2 errors. 이렇게 명령어를 통해서 할 수 도 있고 tsconfig.json파일을 통해서 설정할 수도 있습니다.
{
"compilerOptions" : {
"noImplicitAny" : true
}
} 대개 tsconfig.json 파일을 통해 설정하는 것이 선호됩니다. 파일을 넘겨줌으로써 해당 프로젝트의 타입스크립트 설정이 어떻게 되어있는지 동료들에게 알려줄 수 있기 때문이죠. 설정 파일은 tsc --init 명령어를 통해 생성할 수 있습니다.
linux> tsc --init
message TS6071: Successfully created a tsconfig.json file.
linux> ls
ex1.js ex1.ts tsconfig.json 타입스크립트 설정은 주로 소스파일을 어디서 찾을지, 어떤 출력을 생성할지를 정하는 것이 대다수입니다. 그런데 언어의 핵심요소를 제어할 수도 있습니다. 이 핵심요소 제어에 있어 noImplicitAny와 strictNullChecks는 반드시 짚고 넘어가야될 부분입니다.
noImplicitAny
noImplicitAny는 변수들이 미리 정의된 타입을 가져야하는지를 결정합니다. 앞서 보았던
function add(a,b) {
return a + b;
} 이 코드는 noImplicitAny가 해제되어 있을 때 정상적으로 빌드됩니다. 편집기에서 타입스크립트가 추론한 타입을 보면 function add(a: any, b: any): any 이렇게 나타나는 것을 확인할 수 있습니다. any는 유용하지만 남발할 경우 타입체커가 무력화되어 타입스크립트를 쓰는 이유가 없어지게 됩니다.
function add(a,b) {
// Parameter 'a' implicitly has an 'any' type.ts(7006)
// Parameter 'b' implicitly has an 'any' type.ts(7006)
return a + b;
} any가 코드상에는 없지만 매개변수가 any로 간주되기 때문에 이를 암시적(implicit) any라고 합니다. noImplicitAny가 설정되어 있는데 해당 코드에서 오류를 제거하고자 한다면 매개변수의 타입을 정해주어야 합니다.
function add(a: number, b: number) {
return a + b;
}noImplicitAny는 타입스크립트를 제대로 활용하기 위해서는 반드시 설정해야 합니다. 이를 해제하는 것은 주로 자바스크립트로 되어 있는 기존 프로젝트를 타입스크립트로 전환할 시에만 필요합니다.
strictNullChecks
strictNullChecks는 모든 타입에 null과 undefined를 허용하는지 확인하는 설정입니다. strictNullChecks가 설정되어 있으면
const x: number = null;
// Type 'null' is not assignable to type 'number'.ts(2322)이렇게 에러가 발생합니다. 반대로 해제가 되어있으면
const x: number = null;오류가 나지 않습니다. 만약 strictNullChecks가 설정되어 있는 상태에서 null을 허용하고자 한다면 아래처럼 명시적으로 알려주어야 합니다.
const x: number | null = null;만약 null을 허용하지 않으려면, null을 체크하는 코드난 assertion을 넣어주어야 합니다.
const el = document.getElementById('status');
el.textContent = "Ready";
if(el){
el.textContent = 'Ready';
}
el!.textContent = 'Ready';strictNullChecks는 권장되지만 noImplicitAny처럼 필수적으로 설정해야 되는 것은 아닙니다. 특히, 자바스크립트 코드를 마이그레이션하는 중에는 설정하지 않아도 괜찮습니다.
하지만 strictNullChecks를 해제하면, undefined는 객체가 아닙니다.와 같은 끔찍한 런타임 오류를 만날 수 있습니다. 프로그램의 복잡성이 증가할 수록 타입스크립트 설정을 변경하는 것은 점점 어려워지므로, 가능한 초반에 설정하는 것이 좋습니다. strictNullChecks를 설정하려면 noImplicitAny를 먼저 설정해야합니다.
noImplicitAny와 strcitNullChecks를 동시에 설정하고 싶은 경우에는 strict만 설정하면 됩니다.
