How to convert string to number in Typescript?

Question

I have a const inherited from another component that looking at its typeof, is a string. In javascript my code looks like this:

Here I display a number, eg 24%

{parseInt(progression * 100, 10)}%

Here I display a progress bar

<Bar style={{ width: `${progression * 100}%` }} />

I'm trying to change this code now to typescript and I did the following:

I declared the typing:

interface ProgressionProps {
  progression: string;
}

Here where I should display the %, I put it like this:

{Number(progression * 100, 10)}%

But I have the error:

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts

And also in the other code:

<Bar style={{ width: `${progression * 100}%` }} />

I got the same error:

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts

What am I doing wrong? What is the way to pass this code correctly to typescript?

Thanks if can someone help me!!

You can't operate on a string safely, so you have to convert it and only it to a string first: Number(progression). — k.tten
– k.tten, Commented Sep 14, 2022 at 16:28
To explain Kelly's comment in a different way, when you do progression * 100 you're trying to multiply a string by 100 and that's what Typescript is warning you about. — Etheryte
– Etheryte, Commented Sep 14, 2022 at 16:37

k.tten · Accepted Answer · 2022-09-14 19:08:44Z

5

You need to parse the string to a number before you multiply it:

{Number(progression) * 100}%

And

<Bar style={{ width: `${Number(progression) * 100}%` }} />

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

answered Sep 14, 2022 at 16:39

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! Now, with {Number(progression, 10) * 100}% I got this: Expected 0-1 arguments, but got 2.ts

Right, just Number(....) Without the ,10