The array containing numbers or undefined values cannot be assigned to an array containing only numbers

Question

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

Currently facing an issue with TypeScript and types.

I have an array of IDs obtained from checkboxes, which may also be empty.

An example of values returned from the submit() function:

const responseFromSubmit = {
1: {
  id: "1",
  value: "true"
 },
2: {
  id: "2",
  value: "false"
 },
3: {
  id: "3",
  value: "false"
 } 
};

const Ids: number[] = Object.values(submit()!)
 .map(formfield => {
   if (formfield.value === 'true') {
     return Number(formfield.id);
    }
  })
 .filter(id => id != undefined);

In this scenario, the resulting Ids would be Ids = [1].

I attempted different solutions like modifying the value after the code block by checking if Ids is undefined:

if (ids.length > 0){
 ids = []
}

As a result, the constant Ids is of type (Number | undefined)[], but I aim to always have it as type number[], even when empty.

Here is one potential solution, although not preferred:

const Ids: number[] = Object.values(submit()!)
 .map(formfield => {
   if (formfield.value === 'true') {
     return Number(formfield.id);
   } else {
     return 0;
   }
 })
 .filter(id => id != 0);

In my situation, formfield.id will never equal 0, so filtering out all elements with a value of 0 is feasible. However, I do not recommend this solution. But hey, it does work, right? ¯\_(ツ)_/¯

javascript arrays typescript array.prototype.map

Answer 1

Answer №1

The issue at hand

The main concern revolves around the .filter() function. It consistently returns an array with the same type as the original input. The TypeScript compiler cannot guarantee any other outcome. Consider this example:

const arr/*: (string | number) */ = ["one", 2, 3, "four", 5, 6];

const numbers/*: number[]*/ = arr.filter(x => typeof x === "number");

console.log(numbers);

Playground Link

This approach may work if types are disregarded, but in essence, it is equivalent to:

const arr/*: (string | number)[]*/ = ["one", 2, 3, "four", 5, 6];

const numbers/*: number[]*/ = arr.filter(x => x !== "one");

console.log(numbers);

Playground Link

In both scenarios, there's a mix of data types and some sort of filtering function applied. To ensure the resulting array contains only a specific type, manual examination and inference are required. However, the compiler operates differently - calling .filter() on Array<T | U> will yield Array<T | U> again, without altering the generic.

The solution

To address this, reverse the order of your .map and .filter functions. While requiring rewriting, this adjustment ensures type correctness. More importantly, it streamlines the logic, eliminating implicit double filtering. The map() selectively transforms certain types, allowing the subsequent .filter() operation to sieve out the unaltered values.

Therefore, the correct logic, preserving types, would be as follows:

const Ids: number[] = Object.values(submit()!)
  .filter(formfield => formfield.value === 'true')
  .map(formfield => Number(formfield.id))

Playground Link

This concise version offers a more accurate representation of your intended logic.

The actual filtering condition formfield.value === 'true' is isolated within the .filter() block.
.filter() occurs first, ensuring consistent types from the compiler perspective while narrowing down the list to relevant items.
.map() strictly performs a one-to-one transformation for each array value, simplifying its task without complex logical considerations.

Answer 2

The issue at hand

The main concern revolves around the .filter() function. It consistently returns an array with the same type as the original input. The TypeScript compiler cannot guarantee any other outcome. Consider this example:

const arr/*: (string | number) */ = ["one", 2, 3, "four", 5, 6];

const numbers/*: number[]*/ = arr.filter(x => typeof x === "number");

console.log(numbers);

Playground Link

This approach may work if types are disregarded, but in essence, it is equivalent to:

const arr/*: (string | number)[]*/ = ["one", 2, 3, "four", 5, 6];

const numbers/*: number[]*/ = arr.filter(x => x !== "one");

console.log(numbers);

Playground Link

In both scenarios, there's a mix of data types and some sort of filtering function applied. To ensure the resulting array contains only a specific type, manual examination and inference are required. However, the compiler operates differently - calling .filter() on Array<T | U> will yield Array<T | U> again, without altering the generic.

The solution

To address this, reverse the order of your .map and .filter functions. While requiring rewriting, this adjustment ensures type correctness. More importantly, it streamlines the logic, eliminating implicit double filtering. The map() selectively transforms certain types, allowing the subsequent .filter() operation to sieve out the unaltered values.

Therefore, the correct logic, preserving types, would be as follows:

const Ids: number[] = Object.values(submit()!)
  .filter(formfield => formfield.value === 'true')
  .map(formfield => Number(formfield.id))

Playground Link

This concise version offers a more accurate representation of your intended logic.

The actual filtering condition formfield.value === 'true' is isolated within the .filter() block.
.filter() occurs first, ensuring consistent types from the compiler perspective while narrowing down the list to relevant items.
.map() strictly performs a one-to-one transformation for each array value, simplifying its task without complex logical considerations.

Answer 3

Answer №2

Make sure to include:

    if (formfield.value === 'true') {
      return Number(formfield.id);
    }
    return null;

right below the return statement inside the if condition.

Here is the revised code snippet:

const Ids: number[] = Object.values(submit()!)
  .map(formfield => {
    if (formfield.value === 'true') {
      return Number(formfield.id);
    }
    return null;
  })
  .filter(id => id != undefined);

UPDATE:

An alternative method to verify if a variable is undefined is by using the typeof operator:

typeof id !== 'undefined'

Answer 4

Make sure to include:

    if (formfield.value === 'true') {
      return Number(formfield.id);
    }
    return null;

right below the return statement inside the if condition.

Here is the revised code snippet:

const Ids: number[] = Object.values(submit()!)
  .map(formfield => {
    if (formfield.value === 'true') {
      return Number(formfield.id);
    }
    return null;
  })
  .filter(id => id != undefined);

UPDATE:

An alternative method to verify if a variable is undefined is by using the typeof operator:

typeof id !== 'undefined'

Answer 5

Answer №3

Unfortunately, I cannot give you a direct answer to your question. However, I would like to propose an alternative solution:

const keys = Object.keys( data || {} )
      .reduce( function(result,current) {
                   if( data[current] ) result.push(current);
                   return result
                },
                []
              )

Based on your description, it seems like you are trying to filter out specific values from your object. This code snippet will retrieve the keys that have truthy values. Instead of using result.push(current), consider using something like Number(inputField.id). The data || {} condition handles cases where 'data' is undefined.

Answer 6

Unfortunately, I cannot give you a direct answer to your question. However, I would like to propose an alternative solution:

const keys = Object.keys( data || {} )
      .reduce( function(result,current) {
                   if( data[current] ) result.push(current);
                   return result
                },
                []
              )

Based on your description, it seems like you are trying to filter out specific values from your object. This code snippet will retrieve the keys that have truthy values. Instead of using result.push(current), consider using something like Number(inputField.id). The data || {} condition handles cases where 'data' is undefined.

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

Answer №1

The issue at hand

The solution

Answer №2

Answer №3

Similar questions

Unable to retrieve obj after using $location.url

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

What could be causing my handle button to slide off the timeline towards the right?

The getInitialProps function in Next.js is not functioning properly in mobile browser environments

Encountering an ERROR during the compilation of ./src/polyfills.ts while running ng test - Angular 6. The module build

Is there a way for me to compare a string A1 with a value A2 located in index 0 within an array of values?

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

What methods can be used to modify the behavior of tiptap when pasting plain text?

javascript - Add a function to an array, iterate through, and delete once executed

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Tips for retrieving HTML file content as a string using JavaScript

Creating a universal parent constructor that can take in an object with keys specific to each child class

Change not accepted

Encountering Build Issue: "NgSemanticModule is not recognized as an NgModule" persists despite inclusion of dependencies and importing into primary module

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

Guide to integrating Mongoose typings with Angular 2 webpack starter

Angular 8: Implementing unique service instances for each instance of a shared component

What is the best method to retrieve the value of a button that has been selected from a collection of buttons?

Tips for utilizing the value of object1.property as a property for object2

Retrieve the object from the PHP array of objects by searching for the one with the ID equal to 2