React+TS使用Semantic UI进度条遇ts(2322)类型报错如何解决

• 你在解构useState返回值时，错误给activeStep变量添加了不必要的默认值{percent:0}，导致TypeScript推断activeStep的类型为 number | { percent: number }，而Semantic UI的Progress组件percent属性只接受字符串、数字或undefined，类型不匹配触发了ts(2322)报错。
• 你的useState初始值本身就是数字0，完全不需要额外给解构变量加对象类型的默认值，属于多余的语法错误。

直接删掉解构时给activeStep加的默认值即可，修正后的完整代码如下：

import React, { useState } from 'react'
import { Button, Progress } from 'semantic-ui-react'

export default function ProgressMobileStepper()  {
  // 删掉多余的={percent:0} 默认值
  const [activeStep, setActiveStep] = React.useState(0);
 
  const increment = () => {
    // 额外加了上限判断，避免进度超过100%
    setActiveStep((prevActiveStep) => Math.min(prevActiveStep + 5, 100));
  };

  const decrement = () => {
    // 额外加了下限判断，避免进度出现负数
    setActiveStep((prevActiveStep) => Math.max(prevActiveStep - 5, 0));
  };
 

  return (
    <>
     <div>  
      <Progress percent={activeStep} indicating color={'red'} size={'small'}/>
      <Button onClick={increment}>Increment</Button>
      <Button onClick={decrement}>Decrement</Button>
     </div>
    </>
  );        
}

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