Filter undefined elements and make ESLint happy, too

Davide Ficano — Wed, 27 Mar 2024 00:00:00 +0000

This post is the result of multiple web searches, personal digging and many compromises

Suppose you have the Product defined as shown below

type Product = {
  name: string;
  yearOfPurchase?: number | undefined;
}

and the following data

const products: Product[] = [
  { name: 'House', yearOfPurchase: 2021 },
  { name: 'BMX', },
  { name: 'Car', yearOfPurchase: 2020 },
  { name: 'Chair', yearOfPurchase: undefined },
];

Now you want to filter from the array the elements with the yearOfPurchase correctly set

const purchased = products
  .filter(({yearOfPurchase}) => yearOfPurchase !== undefined);

So finally you can access to the year without any check on it (for simplicity we assume the array is not empty)

const yearAt0 = purchased[0].yearOfPurchase;
const elapsedYears = new Date().getFullYear() - yearAt0;

WRONG!!! The error is still here Object is possibly 'undefined'

The returned type is always the same, yearOfPurchase is always declared as yearOfPurchase?: number | undefined

We can define a new type, where all properties are defined as mandatory

type SafeYear = Required<Product>;

and create a user-defined type guard

function isSafeYear(v: Product): v is SafeYear {
  return v.yearOfPurchase !== undefined;
}

then use it with filter()

const purchased = products.filter(isSafeYear);

and finally

const yearAt0 = purchased[0].yearOfPurchase;
const elapsedYears = new Date().getFullYear() - yearAt0;

compiles without errors

...but ESLint Unicorn disagrees

If you use ESLint and turned on the Unicorn rule Prevent passing a function reference directly to iterator methods

Another problem occurs

ESLint: Do not pass function `isSafeYear` directly to `.filter(…)`.(unicorn/no-array-callback-reference)

So you modify the code to be compliant with ESLint

const purchased = products.filter(e => isSafeYear(e));

But again Object is possibly 'undefined'

The returned type by the passed callback is Product so we need to explicitly declare the type

const purchased = products.filter((e): e is SafeYear => isSafeYear(e));

and finally

const elapsedYears = new Date().getFullYear() - purchased[0].yearOfPurchase;

works again

Fields are required but values accept undefined

Consider the type defined as below

type Product = {
  name: string;
  yearOfPurchase: number | undefined;
}

Pay attention, yearOfPurchase now is required and no longer declared as yearOfPurchase? but the value as before accepts undefined

The SafeYear type no longer removes the undefined because all fields are required, so the code below stopped AGAIN to compile, GRRRRRR!!!

const yearAt0 = purchased[0].yearOfPurchase;
const elapsedYears = new Date().getFullYear() - yearAt0;

The standard Utility Types contains the NonNullable<Type> but it doesn't work on fields, only on direct types, so we need to create our own version

type NonNullableFields<T> = {
  [P in keyof T]: NonNullable<T[P]>;
};

and change the SafeYear definition

type SafeYear = NonNullableFields<Product>;

and the code compiles again

Declare the type of a variable using that of a property

Davide Ficano — Wed, 20 Mar 2024 14:14:35 +0000

tiny how-tos to survive to the hostile code we write every day

Suppose you are using a type buried into a third-party library

type Line = {
  name: string;
  positions?: ReadonlyArray<number> | undefined;
}

const line: Line = {
  name: 'Line1',
  positions: [10, 20, 30]
};

and you need to declare a variable with the same type used to define the property positions

You can create your own type and use it where necessary

type MyPositions = ReadonlyArray<number> | undefined

on you can simply copy the definition

function showPositions(
  positions: ReadonlyArray<number> | undefined
): void {
  /// ...
}

then call it with

showPositions(line.positions);

but the library at some point changes the positions definition

type PositionName = 'top' | 'bottom';

type Line = {
  name: string;
  positions?: ReadonlyArray<number | PositionName> | undefined;
}

const line1: Line = {
  name: 'Line1',
  positions: [10, 'top', 30]
};

and your code stops compiling

showPositions(line1.positions);

  Argument of type 'readonly (number | PositionName)[] | undefined' is not assignable to parameter of type 'readonly number[] | undefined'.
    Type 'readonly (number | PositionName)[]' is not assignable to type 'readonly number[]'.
      Type 'number | PositionName' is not assignable to type 'number'.
        Type 'string' is not assignable to type 'number

using index access you can resolve this problem forever

Declare the variable type using directly the positions index in the type Line

function showPositions(
  positions: Line1['positions']
): void {
  /// ...
}

and the code continues to compile

showPositions(line.positions);
showPositions(line1.positions);

DEV Community: Davide Ficano

Filter undefined elements and make ESLint happy, too

...but ESLint Unicorn disagrees

Fields are required but values accept undefined

Declare the type of a variable using that of a property