I have a const inherited from another ponent 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!!

I have a const inherited from another ponent 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!!

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Sep 14, 2022 at 19:04 Matthieu Riegler 56.9k2727 gold badges148148 silver badges200200 bronze badges asked Sep 14, 2022 at 16:27 gmcodegmcode 10322 silver badges1212 bronze badges 2

• 2 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 Commented Sep 14, 2022 at 16:28
• To explain Kelly's ment 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 Commented Sep 14, 2022 at 16:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

{Number(progression) * 100}%

And

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