CODEWITHSUNDEEP
javascripttypescriptvue.js
Russ
Russ

Reputation: 7

Having an Issue with Typescript in VueJS with setProperty

Still trying to get my head around typescript so please forgive me but my searches have yielded me no answers. All my other types have worked well but I just can't figure out how to get the value in style.setProperty(propertyName, value) to accept the number.

    function setRotation(vari: HTMLElement , rotationRatio: number) {
      vari.style.setProperty('--rotation', rotationRatio * 360);
    }

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

TypeScript Error--'

Upvotes: 0

Views: 262

Answers (1)

Estus Flask
Estus Flask

Reputation: 222503

A value is expected to be as string.

It can be converted to a string, e.g.:

vari.style.setProperty('--rotation', `${rotationRatio * 360}`);

It's virtually always safe to provide numbers to native functions that expect strings, as they are coerced to strings internally. A type can be also casted, it takes a bit more characters in TS code and a bit less in compiled JS:

vari.style.setProperty('--rotation', (rotationRatio * 360) as unknown as string);

Upvotes: 1

Related Questions