(이펙티브 타입스크립트) 아이템 2. 타입스크립트 설정 이해하기

아이템 2. 타입스크립트 설정 이해하기

function add(a, b) {
	return a + b;
}
add(10, null);

이 코드는 오류 없이 타입 체커를 통과할 수 있을까?

⇒ 이를 알기 위해서는 타입스크립트 컴파일러의 설정을 알아야한다.

$ tsc --noImplicitAny program.ts

이 설정들은 커맨드 라인에서 사용 가능함.

{
	"compilerOptions": {
		"noImplicitAny": true
	}
}

하지만 보통 설정이 많고, 동료들과 통일된 옵션을 사용해야 하므로 tsconfig.json에 설정해두는 걸 추천 (참고: tsc —init 을 실행하면 생성됨)

설정을 제대로 사용하려면 noImplicitAny와 strictNullCheck를 이해해야 한다.

1. noImplicitAny

noImplicitAny : 변수들이 미리 정의된 타입을 가져야하는지 여부

function add(a, b) {
	return a + b;
}

// 타입스크립트는 위 코드를 아래처럼 추론함
function add(a: any, b: any): any {
	return a + b;
}

any 타입을 코드에 넣지는 않았지만, any 타입으로 간주한다. 이를 Implicit(암시적)any 라고 부른다.

이때 noImplicitAny가 true로 설정되어 있다면 이를 오류로 처리한다. 이 오류들은 명시적으로 : any로 선언해주거나 더 분명한 타입을 적용해주면 해결된다.

function add(a: number, b: number): number {
	return a + b;
}

위 코드처럼 타입스크립트는 타입 정보를 가질 때 가장 효과적이다. 그러므로 noImplicitAny 는 되도록 설정하자.

2. strictNullCheck

strictNullCheck는 null, undefined 가 모든 타입에서 허용되는지 확인하는 설정이다.

// strictNullCheck: false
const x: number = null;  // 정상, null은 유효한 값
const x: number = undefined;  // 정상, undefined은 유효한 값

// strictNullCheck: true
const x: number = null;  // ~ 'null' 형식은 'number' 형식에 할당할 수 없습니다.
const x: number = undefined;  // ~ 'undefined' 형식은 'number' 형식에 할당할 수 없습니다.

// 통과하기 위해서 타입 재정의
const x: number | null = null;

만약 null을 허용하지 않으려면 이 값이 어디서부터 왔는지 찾아야하고, null을 체크하는 코드나 타입 단언(assertion)을 추가해야 한다.

const el = document.getElementById('status');  // el이 null이 될 수도 있음
el.textContent = 'Ready';  // ~ 개체가 'null' 인 것 같습니다.

if(el) {
	el.textContent = 'Ready'; // 정상, null은 제외됨
} 
// 혹은
el!.textContent = 'Ready'; // 정산, el이 null이 아님을 단언

strictNullCheck 는 null과 undefined 관련된 오류를 잡아 내는데 많은 도움이 되지만, 코드 작성을 어렵게 하기도 합니다

요약

• 타입스크립트 컴파일러는 언어의 핵심 요소에 영향을 미치는 몇가지 설정을 포함한다.
• 타입스크립트 설정은 커맨드 라인을 이용하기보다는 tsconfig.json을 사용하는 것이 좋다
• 자바스크립트 프로젝트를 타입스크립트로 전환하는게 아니라면 noImplicitAny를 설정하는 것이 좋다.
• “undefined 는 객체가 아닙니다.” 같은 런타임 오류를 방지하기 위해 strictNullCheck를 설정하는 것이 좋다.
• 타입스크립트에서 엄격한 체크를 하고 싶다면 strict 설정을 고려해야 한다.