TypeScript中字符串转数字：运算报错问题及解决方法

你声明的progression是字符串类型，TypeScript作为强类型语言，不允许直接对字符串执行算术乘法运算——这和JavaScript的隐式类型转换逻辑不同，TS会严格校验操作数的类型，所以才会抛出「算术运算左侧必须是any、number、bigint或枚举类型」的错误。

核心思路是先把字符串类型的progression转换为数字，再进行计算，具体改写方式如下：

基础改写方案 #

直接用parseFloat()或Number()将字符串转成数字后再运算，适配你的两个场景：

• 百分比显示代码：

{Math.round(parseFloat(progression) * 100)}%

如果你需要像原JS代码那样截断小数（而非四舍五入），可以保留parseInt，但要先转成数字：

{parseInt(String(parseFloat(progression) * 100), 10)}%

• 进度条代码：

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

更严谨的容错方案 #

如果不确定progression是否是合法的数字格式字符串，可以加校验避免出现NaN的情况：

// 先转换并校验合法性
const numProgress = parseFloat(progression);
const validProgress = isNaN(numProgress) ? 0 : numProgress;

// 后续使用转换后的合法数字
{Math.round(validProgress * 100)}%
<Bar style={{ width: `${validProgress * 100}%` }} />

可选的接口优化 #

如果progression本质是数字但因组件继承只能拿到字符串，可以在接口里添加注释说明，提升代码可读性：

interface ProgressionProps {
  // 格式为数字的字符串（如"0.75"表示75%）
  progression: string;
}

内容的提问来源于stack exchange，提问作者gmcode