TypeScript filter out nulls from an array

by

You can use a type predicate function in the .filter to avoid opting out of strict type checking:

function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
    return value !== null && value !== undefined;
}

const array: (string | null)[] = ['foo', 'bar', null, 'zoo', null];
const filteredArray: string[] = array.filter(notEmpty);

Alternatively you can use array.reduce<string[]>(...).

2021 update: stricter predicates

While this solution works in most scenarios, you can get a more rigorous type check in the predicate. As presented, the function notEmpty does not actually guarantee that it identifies correctly whether the value is null or undefined at compile time. For example, try shortening its return statement down to return value !== null;, and you’ll see no compiler error, even though the function will incorrectly return true on undefined.

One way to mitigate this is to constrain the type first using control flow blocks, and then to use a dummy variable to give the compiler something to check. In the example below, the compiler is able to infer that the value parameter cannot be a null or undefined by the time it gets to the assignment. However, if you remove || value === undefined from the if condition, you will see a compiler error, informing you of the bug in the example above.

function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
  if (value === null || value === undefined) return false;
  const testDummy: TValue = value;
  return true;
}

A word of caution: there exist situations where this method can still fail you. Be sure to be mindful of issues associated with contravariance.

More Related Contents:

  1. How to define Typescript type as a dictionary of strings but with one numeric “id” property
  2. How to suppress “error TS2533: Object is possibly ‘null’ or ‘undefined'”?
  3. Why does A | B allow a combination of both, and how can I prevent it?
  4. How to return value from function which has Observable subscription inside?
  5. Typescript Discriminated Union allows invalid state
  6. Why can’t I return a generic ‘T’ to satisfy a Partial?
  7. Parameters generic of overloaded function doesn’t contain all options
  8. Enforcing the type of the indexed members of a Typescript object?
  9. Constructor overload in TypeScript
  10. What does ‘declare’ do in ‘export declare class Actions’?
  11. Typescript: Can I define an n-length tuple type?
  12. How to use namespaces with import in TypeScript
  13. Difference between type[] and [type] in typescript
  14. How can I create an object based on an interface file definition in TypeScript?
  15. angular2 bootstrap with data from ajax call(s)
  16. Interface is allowing extra property when it is used as return type of a function
  17. Typescript: What’s the difference between an optional field and a union with undefined?
  18. How can I define an array of objects?
  19. How to require a specific string in TypeScript interface
  20. Why do subtypes need to be assigned to a variable before being used as a function argument?
  21. ‘Property does not exist on type ‘never’
  22. Typescript type T or function () => T usage
  23. Flatten object with custom keys in Typescript
  24. TypeScript sorting an array
  25. Angular 2 ngModel in child component updates parent component property
  26. How to extend the ‘Window’ typescript interface
  27. Getting the return type of a function which uses generics
  28. How to make “handler” lookup for “dispatcher” style function be typed correctly
  29. How to place a dynamic component in a container
  30. Modules vs. Namespaces: What is the correct way to organize a large typescript project?

Leave a Comment