Argument of type 'string | number' is not assignable to parameter of type 'number'

Question

Question Modified With an example method to the end: -

I have an interface as shown below for typing an object.

export interface IList{
  name: string;
  age: number;
  option: number;
  quantity: number;
  priority: number;
}

Due to some requirement I have to assign a "string" to the "priority" property at the end of all operations before sending it to the backend.

As I've to assign a string, I tried using a union operator :-

priority : number | string; But all the other pieces of code wherever I used other operations taking this as a number into consideration is also throwing me the below error:

Argument of type 'string | number' is not assignable to parameter of type 'number'
  Type 'string' is not assignable to type 'number'.

How do I get around this and use priority as a both a string and number to type my object.

Here is one condition where I am using the "IList" interface as a type and assigning a number if multiGroupHeader is true, else I have to assign a string :-

public updatePriorities(Lists: IList[]) {
  if (!this.multiGroupHeader) {
    const priorities = Lists.map((list: IList) => list.priority);
    const uniquePriorities = [...new Set(priorities)];
    if (uniquePriorities.length === 1 && uniquePriorities[0] === 1) {
      return;
    }
    uniquePriorities.sort((priority1: number, priority2: number) => priority1 - priority2);
    const updatedPriorities = uniquePriorities.map((priority: number, index: number) => {
      return index + 1;
    });

    uniquePriorities.forEach((id: number, index: number) => {
      Lists.forEach((list: IList) => {
        if (list.priority === id) {
          list.priority = updatedPriorities[index];
        }
      });
    });
  } else {
    Lists.forEach((list: IList) => (list.priority = "CURRENT"));
  }
}

Solution

One way you can work around this is by asserting/narrowing the type before handing it to the functions that expect only a string or number:

if (typeof list.priority === 'number') {
  // list.priority's type inside these braces is only 'number'
}

There are other ways assert the type of a variable, too: https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions

Comments

[Veryon890]

I tried it this way Lists.forEach((list:IListForServer ) => list.priority = "CURRENT"). But the issue is the paraemeter to the method is of the type IList[] ( public updatePriorities(Lists: IList[])), so changing something inside to IListForServer is throwing me an error. I tried using a Union type : - public updatePriorities(Lists: IList[] | I IListForServer[] ) event this is throwing an error. Error in next comment.

[Veryon890]

Type '(list: IList) => void' is not assignable to type '(value: IListForServer, index: number, array: IListForServer[]) => void'. Types of parameters 'list' and 'value' are incompatible. Type 'IListForServer' is not assignable to type 'IList'. Types of property 'priority' are incompatible. Type 'string' is not assignable to type 'number'. list.forEach((darkPool: IList) => {

[Ambroise Rabier]

@Veryon890 When you said "before sending it to the backend" I assumed this was an http request, not in the showed code, it seem I was mistaken. I feel like there is some structuring issue. Maybe you can add a field in IList priorityIsCurrent: boolean so that you don't have to do list.priority = "CURRENT".

[Veryon890]

@Ambrose - For now, I separated out the else condition from this method and included it wherever I am calling the function. if (!this.multiGroupHeader) { this.updatePriorities(this.fetchedList); } else { this.fetchedList.forEach( (list: IListForServer) => (list.priority = 'CURRENT') ); }