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

user_15748278 0
Viewed 65

I created a function for setting multiple HTML attributes at once -

function attrs(element: HTMLElement, attrs: { [key: string]: string | number }): void {
  for (let attr in attrs) {
    element.setAttribute(attr, typeof attrs[attr] === 'number' ? attrs[attr].toString() : attrs[attr])
  }
}

I was trying to generic object which accepts key of type string and value of type string or number. But as we know setAttribute() takes 2 args of type string. I put a check; to check whether the value is type of string or number and if the type is number I changed it to string as you can see in the function.

Even then I am getting

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

P.S - Also suggest a better title for this question

typescript
1 Answers

Use an intermediate variable to help with the narrowing:

function attrs(element: HTMLElement, attrs: { [key: string]: string | number }): void {
  for (let attr in attrs) {
    const attrValue = attrs[attr];
    element.setAttribute(attr, typeof attrValue === 'number' ? attrValue.toString() : attrValue)
  }
}

Playground

user_8841230
Related