DEV Community

Cole Walker
Cole Walker

Posted on


Filtering Null Values out of TypeScript Arrays

Filtering Null Values out of TypeScript Arrays

Something that stumped me the first time I encountered it in TypeScript was dealing with nullable types in arrays. When dealing with arrays, we often do not want to keep the null values in, or we want to perform a map operation and get yelled at by the compiler about missing properties. I learned a little snippet to deal with this, which I will explain step by step.

First, let's establish the scenario.

interface DoesntMatter{
  meaningless: (string|null)[]

Here we have an interface DoesntMatter with a property 'meaningless', which is an array containing either strings or null values.

Assume that we have an instance of DoesntMatter in our code, and we need to concatenate the strings of the array into one mega-string. Unfortunately, we can't do that without getting rid of all of the nulls first.

instanceOfDoesntMatter.meaningless.filter((val: val is string) => !!val)

The above snippet uses a really cool feature, called a type guard. The type guard will check to make sure val is a string, and if it is, it'll run the function. If it isn't, it won't run the function. Since we only need to filter out nulls, we know that the function will only run if the value is a string already, so we can return true if val, which is what the !! is doing.

The result of this filter is an array which contains nothing but string values.

Type guards are a very powerful feature, and this is only one small use case of the nearly endless possibilities with them.

Top comments (1)

andykenward profile image
Andy Kenward • Edited

Have you check that using val is string in that way actually works?
My understanding of type guards is you still need a function to check the type of val.

For example:

const isString = (x: any): x is string => {
  return typeof x === "string";

Enter fullscreen mode Exit fullscreen mode

Something like this would result in the inferred typings of the meaningless array to be string[] instead of (string|null)[].

Using TypeScript ^4.1.3

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓