为何TypeScript不允许该计算？多步骤表单回退类型报错排查

问题原因 #

这不是TypeScript的bug，是它的类型系统特性导致的：当你对2 | 3类型的变量执行-1运算时，TypeScript会把结果推断为宽泛的number类型，不会自动将结果收窄到1 | 2——尽管从逻辑上我们能确定结果符合要求，但静态类型分析不会做算术层面的推导，因此会抛出类型不匹配的错误。

可行解决方案 #

方案1：类型断言 #

直接告知TypeScript运算结果符合目标类型，是最简洁的写法：

const [step, setStep] = useState<1 | 2 | 3 | 4>(1)
// ...
if (step === 1 || step === 4) {
    // 退出页面
} else {
    setStep((step - 1) as 1 | 2 | 3 | 4)
}

也可以用更精确的断言缩小范围：

setStep((step - 1) as 1 | 2)

方案2：拆分条件分支 #

把else里的情况拆成具体的step值，让TypeScript明确每个分支的结果类型：

const [step, setStep] = useState<1 | 2 | 3 | 4>(1)
// ...
if (step === 1 || step === 4) {
    // 退出页面
} else if (step === 2) {
    setStep(1)
} else { // step === 3
    setStep(2)
}

方案3：自定义类型守卫 #

如果后续步骤数量可能增加，写一个类型守卫函数来校验结果合法性，兼顾类型安全和扩展性：

function isStep(value: number): value is 1 | 2 | 3 | 4 {
    return [1,2,3,4].includes(value)
}

// ...
const [step, setStep] = useState<1 | 2 | 3 | 4>(1)
// ...
if (step === 1 || step === 4) {
    // 退出页面
} else {
    const prevStep = step - 1
    if (isStep(prevStep)) {
        setStep(prevStep)
    }
}

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