React+TypeScript滑块开发遇类型错误：string无法赋值给SetStateAction<number>

错误原因 #

你遇到的类型错误是因为setPosition对应的状态被定义为number类型，但调用时传入了拼接'px'后的字符串，TypeScript 严格校验类型，因此抛出类型不兼容的错误。

两种解决方式 #

方式1：保持状态为数值（推荐，更利于后续计算）

如果position状态用于逻辑计算，建议仅存储数值，在应用样式时再拼接单位：

// 状态默认是number类型，无需额外指定
const [position, setPosition] = useState(0);

useEffect(() => {
  // 只传入数值，移除'px'拼接
  setPosition(-(currentKey * window.innerWidth));
}, [currentKey])

// 在组件样式中使用时拼接单位
<div style={{ transform: `translateX(${position}px)` }} />

方式2：修改状态类型为字符串

如果业务逻辑需要直接存储带单位的字符串，需显式指定状态类型为string：

// 显式将状态类型定义为string
const [position, setPosition] = useState<string>('0px');

useEffect(() => {
  // 此时传入字符串合法
  setPosition(`-${currentKey * window.innerWidth}px`);
}, [currentKey])

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