[TS] Array filter 타입 추론 - type guard

👻 Array.prototype.filter()

JavaScript에서는 filter 메소드를 사용해서 요소를 걸러낼 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN

const arr = [1,2,3,null,undefined]
const filteredArr = arr.filter((value)=> Boolean(value))

// filteredArr : [1,2,3]

그러나 filter 메소드는 타입을 걸러내지는 않는다. 위와 같이 filter 메소드를 사용해 null과 undefined를 걸러냈지만 filteredArr의 타입은 number | null | undefined로 추론된다. 기존에 arr의 타입을 그대로 추론하는 것이다.

👻 Type Guard 사용하기

TypeScript에는 type guard라는 기능이 존재한다. 이 기능을 사용하면 filter 메소드를 사용하면서도 타입 적절하게 설정할 수 있다.

const arr = [1,2,3,null,undefined]
const filteredArr = arr.filter((value): value is number => Boolean(value))

// filteredArr : [1,2,3]

위에서는 value is number 이라는 type guard를 사용해 값이 모두 number 타입이라는 것을 알려준다. 

function isDefined<T>(arg: T | undefined | null): arg is T{
	return arg !== undefined || arg !== null
}

위의 isDefined 함수를 사용하면 null과 undefined를 제외한, 사용자가 지정한 타입을 가진 값들만 걸러낼 수 있다.