In TypeScript, leveraging the spread operator to determine the largest value in an array containing nullable numbers

Question

In TypeScript, leveraging the spread operator to determine the largest value in an array containing nullable numbers

Having an array of nullable numbers presented in the following way:

let myArray : Array<number | null> = [1,2,null,4,null,5];
let maximumOfMyArray = Math.max(...myArray); // Type null is not assignable to type number

I am content with JavaScript treating null as 0 in this scenario. There are two potential solutions that come to mind, but neither are perfect:

let myArray : Array<number | null> = [1,2,null,4,null,5];
//@ts-ignore
let maximumOfMyArray = Math.max(...myArray);

The above method does not fully resolve the issue, and:

let myArray : Array<number | null> = [1,2,null,4,null,5];
let castArray = myArray as unknown as Array<number>;
let maximumOfMyArray = Math.max(...myArray);

Is there a solution available that does not rely on these workarounds?

typescript

Answer 1

Answer №1

To narrow down the array, use a type guardian

const ns: Array<number | null>
const isDefined: <A>(a: A | null | undefined) => a is A

Math.max(...ns.filter(isDefined)) // number

Answer 2

To narrow down the array, use a type guardian

const ns: Array<number | null>
const isDefined: <A>(a: A | null | undefined) => a is A

Math.max(...ns.filter(isDefined)) // number

Answer 3

Answer №2

Can a solution be found without resorting to these workarounds?

A different approach is available: Convert the nulls explicitly to 0 using the map function:

let maximumOfMyArray = Math.max(...myArray.map(v => v === null ? 0 : v));

Link to demo

If you don't convert the nulls to numbers (or filter them out as suggested below), your only option is to use a workaround like the ones mentioned, since TypeScript does not allow mixing different types intentionally.

Filtering out the nulls alone did not satisfy TypeScript without a type assertion, even with typeof v === "number". However, it does enable you to perform the type assertion without needing unknown:

const myArrayWithoutNulls = myArray.filter(v => v !== null) as Array<number>;
let maximumOfMyArray = Math.max(...myArrayWithoutNulls);

Link to playground

Alternatively, and a much cleaner option, consider implementing a type guard function as demonstrated by Denis Frezzato in their post on Stack Overflow.

Answer 4

Can a solution be found without resorting to these workarounds?

A different approach is available: Convert the nulls explicitly to 0 using the map function:

let maximumOfMyArray = Math.max(...myArray.map(v => v === null ? 0 : v));

Link to demo

If you don't convert the nulls to numbers (or filter them out as suggested below), your only option is to use a workaround like the ones mentioned, since TypeScript does not allow mixing different types intentionally.

Filtering out the nulls alone did not satisfy TypeScript without a type assertion, even with typeof v === "number". However, it does enable you to perform the type assertion without needing unknown:

const myArrayWithoutNulls = myArray.filter(v => v !== null) as Array<number>;
let maximumOfMyArray = Math.max(...myArrayWithoutNulls);

Link to playground

Alternatively, and a much cleaner option, consider implementing a type guard function as demonstrated by Denis Frezzato in their post on Stack Overflow.

Answer 5

Answer №3

Instead of following the suggestion from @T.J. Crowder, you can take a different approach by expanding the functionality of Math.max to accommodate null values. By doing this, your original code will remain functional without any modifications.

To achieve this, update your .d.ts file with the following:

declare global {
  interface Math {
    max(...values: (number | null)[]): number
  }
}

Answer 6

Instead of following the suggestion from @T.J. Crowder, you can take a different approach by expanding the functionality of Math.max to accommodate null values. By doing this, your original code will remain functional without any modifications.

To achieve this, update your .d.ts file with the following:

declare global {
  interface Math {
    max(...values: (number | null)[]): number
  }
}

In TypeScript, leveraging the spread operator to determine the largest value in an array containing nullable numbers

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to change multiple parameters using ngModelChange?

The logout feature might refresh the page, yet the user remains logged in

What is the process of 'initializing' an object in TypeScript?

How to pass a String Array to a String literal in JavaScript

JavaScript cannot determine the length of an array of objects

Tips for injecting scripts into the head tag after an Angular component has been loaded

The type 'FormikValues' is deficient in the subsequent properties compared to the type 'Exact<{'

Fastify Typescript: dealing with an unidentified body

What is the best approach for submitting a form with data through a POST request in an Ionic application?

What is the best way to invoke a function in a specific child component from its parent component?

Is it possible for Typescript interface A to extend B while lacking certain properties from B?

Typescript's date function offers a variety of useful features

What is the process for utilizing ts-node ESM in conjunction with node modules?

Playwright failing to execute GraphQL tests due to TypeScript configuration problems

Using the useContext hook in a TypeScript class component: a step-by-step guide

Constructing objects in TypeScript is a breeze with its C#-ins

What are the steps to executing a function that instantiates an object?

Execute a grandchild function in Angular that triggers its grandparent function

Attempting to execute a synchronous delete operation in Angular 6 upon the browser closing event, specifically the beforeunload or unload event

Searching for data based on specific keywords in Angular 2, rather than using a wildcard search, can be done by utilizing the key-in