Narrowing arrow types with Array.filter and TypeScript
When dealing with heterogeneous arrays in TypeScript, I frequently want to use
list.filter(...) to extract an array of all one type. However without extra effort, TypeScript will implicitly type the result of that filtering the same as the input.
strings are still considered heterogeneous by TypeScript, even though we know they’re not. It turns out
Array.filter is a generic and can accept a type to narrow down to. Here’s how:
With this approach,
reallyJustStrings are homogeneous arrays, which makes it easier to work with the items in them.
The key to this approach is two parts:
filter<type>to specify the type we’re narrowing down to.
- Defining the filter function as a user defined type guard using
(thing): thing is number.
When we define the function’s return type as
thing is number we’re telling TypeScript that the returned value will be a boolean that indicates whether or not the parameter
thing is of type
number . The logic within our filter function hasn’t changed — it’s just that we’ve given the compiler the information it needs to know that the filter narrows the input type down to just numbers.
User defined type guards are basically awesome. You can read more about them in my article on type guards and user input validation: