Remove undefined element from array in typescript

10 feb 2022

I had to use some async method on an array to be generating a new one. As array.filter does not support Promises it leads to be using array.map and Promise.all. However using array.map means that your outputted array will be containing unwanted undefined occurrences, that you could remove using a filter on the end. But this wont be enough for typescript itself, even if indeed it would work on runtime.

const rawResults = await Promise.all(
  array.map(async (_, index) => {
    if (await someAsyncFunction(index)) {
      return index;
    }
  })
);
// const rawResults: (number | undefined)[]

const parsedResults = rawResults.filter((el) => el !== undefined);
// parsedResults still has the same type as rawResults
// const parsedResults: (number | undefined)[]

We need some more TS syntax to make the array type as not containing undefined anymore. Using type predicates we can tell typescript that the filter will return only the expected type

const rawResults = await Promise.all(
  array.map(async (_, index) => {
    if (await someAsyncFunction(index)) {
      return index;
    }
  })
);
// const rawResults: (number | undefined)[]

const parsedResults = rawResults.filter(
  (el: number | undefined): el is number => el !== undefined
);
// const parsedResults: number[]