Type Guard

💡 Type guard (타입 보호): 정확한 의미 전달을 위해 “type guard”는 한글로 번역하지 않는다.

Type guard를 사용하면 조건문에서 객체의 타입을 좁혀나갈 수 있다.

typeof

TypeScript는 JavaScript의 instaceof, typeof 연산자를 이해할 수 있다. 즉 조건문에 typeof와 instanceof를 사용하면, TypeScript는 해당 조건문 블록 내에서는 해당 변수의 타입이 다르다는 것(=좁혀진 범위의 타입)을 이해한다. 아래 예시를 보면 TypeScript는 특정 메소드(String.prototype.substr)가 string에 존재하지 않는다는 사실을 인식해 사용자 오타가 있을 수 있음을 지적하고 있다.

function doSomething(x: number | string) {
	if (typeof x === 'string') {
		console.log(x.subtr(1)); // TypeScript는 'subtr'은 'string'에 존재하지 않음을 알고 경고를 내보낸다
		console.log(x.substr(1));
	}
	x.substr(1); // Error -> x가 'string'이라는 보장이 없다.
}

instanceof

class Foo {
	foo = 123;
	common = '123';
}

class Bar {
	bar = 123;
	common = '123';
}

function doStuff(arg: Foo | Bar) {
	if (arg instanceof Foo) {
		console.log(arg.foo); // 
		console.log(arg.bar); // Error! -> Foo에는 bar가 없다.
	}
	
	 if (arg instanceof Bar) {
    console.log(arg.foo); // Error!
    console.log(arg.bar); // ㅇㅋ
  }

  console.log(arg.common); // ㅇㅋ
  console.log(arg.foo); // Error!
  console.log(arg.bar); // Error!
 }
 
 doStuff(new Foo());
 doStuff(new Bar());

TypeScript는 else 또한 이해하기 때문에 우리가 if문으로 타입을 하나 좁혀내면, else문 안의 변수 타입은 절대 동일한 타입이 될 수는 없음 을 인지한다. 아래 예시를 보자.

class Foo {
  foo = 123;
}

class Bar {
  bar = 123;
}

function doStuff(arg: Foo | Bar) {
	if (arg instanceof Foo) {
		console.log(arg.foo); // ㅇㅋ
		console.log(arg.bar); // Error!
	} else { // if에서 이미 Foo일때를 걸렀으니 Bar이겠군
		console.log(arg.foo); // Error!
		console.log(arg.bar); // ㅇㅋ
	}
}

doStuff(new Foo());
doStuff(new Bar());

in

in은 객체 내부에 특정 property가 존재하는지를 확인하는 연산자로 type guard로 활용할 수 있다.

interface A {
	x: number;
}

interface B {
	y: string;
}

function doStuff(q: A | B) {
	if ('x' in q) {
	// q: A
	} else {
	// q: B
	}
}

리터럴 Type Guard

리터럴 값의 경우 === / == / !== / != 연산자를 사용해 타입을 구분할 수 있다.

type TriState = 'yes' | 'no' | 'unknown';

function logOutState(state: TriState) {
	if (state == 'yes') {
		console.log('사용자가 yes를 골랐습니다');
	} else if (state == 'no') {
		console.log('사용자가 no를 골랐습니다');
	} else {
		console.log('사용자가 아직 결정을 내리지 않았습니다');
	}
}

이는 union 타입에 리터럴이 있는 경우에도 동일하게 적용된다. union 타입의 공통 property 값을 비교해 union 타입을 구분할 수 있다.

type Foo = {
	kind: 'foo', // 리터럴 타입
	foo: number
}

type Bar = {
	kind: 'bar', // 리터럴 타입
	bar: number
}

function doStuff(arg: Foo | Bar) { // Foo, Bar 공통 타입이 kind이니까 이걸로 비교
	if (arg.kind === 'foo') {
		console.log(arg.foo); // okay
		console.log(arg.bar); // Error!
	} else {
		console.log(arg.foo); // Error!
		console.log(arg.bar); // okay
	}
}

null과 undefined (strictNullChecks)

TypeScript는 a == null / != null로 null과 undefined 모두 걸러낼 만큼 엄격하다.

function foo(a?: number | null) {
 if (a == null) return;
 // 이제부터 a는 값이 있다면 무조건 number이다.
}

사용자 정의 Type Guards

JavaScript 언어는 풍부한 런타임 내부 검사 (=runtime introspection support)를 지원하진 않는다. 일반 JavaScript 객체(구조적 타입 structural typings 활용)를 사용할 때에는 instanceof나 typeof와 같은 연산자를 엑세스조차 할 수 없다. 하지만 TypeScript에서는 사용자 정의 Type Guard 함수를 만들어 이를 해결할 수 있다. 사용자 정의 Type Guard 함수란 단순히 어떤 인자명은 어떠한 타입이다 라는 값을 리턴하는 함수일 뿐이다.

/**
 * 일반적인 인터페이스 예시
 */
 interface Foo {
	 foo: number;
	 common: string;
  }
	
 interface Bar {
	 bar: number;
	 common: string;
	}
	
/**
	* 사용자 정의 Type Guard!
	*/
	function isFoo(arg: any): arg is Foo {
		return arg.foo !== undefined;
	}
	
/**
	* 사용자 정의 Type Guard 사용 예시
	*/	
	function doStuff(arg: Foo | Bar) {
		if (isFoo(arg)) {
			console.log(arg.foo); // okay
			console.log(arg.bar); // Error!
		} else {
			console.log(arg.foo); // Error!
			console.log(arg.bar); // okay
		}
	}
	
	doStuff({ foo: 123, common: '123' });
	doStuff({ bar: 123, common: '123' });
		

타입 가드 | TypeScript Deep Dive