TypeScript & Yup 错误：'Reference<unknown>' 类型的参数不可分配给'number | 类型的参数参考<编号>'

Question

将yup v0.32.8 与 TypeScript 一起使用时，我们会收到 TS 错误消息

“参考”类型的参数不能分配给“数字”类型的参数 |参考'。 “参考”类型不能分配给“参考”类型。 类型 'unknown' 不可分配给类型 'number'.ts(2345)

当我们尝试将Yup.ref() 函数与Yup.moreThan() 一起使用时，例如在this SO question that does not use TypeScript 中。

为什么在使用 TypeScript 时会出现此错误，我们该如何解决？谢谢！

import * as Yup from 'yup';

const schema = Yup.object().shape({
    minPrice: Yup
        .number()
        .positive('Must be positive')
        .integer('Must be an integer')
        .required('Required'),
    maxPrice: Yup
        .number()
        .positive('Must be positive')
        .integer('Must be an integer')
        .moreThan(Yup.ref('minPrice'))     // <- ERROR HERE!
        .required('Required'),
})

---

更新：

改成

    maxPrice: Yup
        .number()
        .positive('Must be positive')
        .integer('Must be an integer')
        .moreThan(Yup.ref<number>('minPrice'))
        .required('Required'),

导致错误

“参考”类型的参数不能分配给“数字”类型的参数 |参考'。 “参考”类型不能分配给“参考”类型。 类型“未知”不能分配给类型“数字”。 TS2345

Answer 1

您可以为Yup.ref 提供一个泛型类型。它默认为未知并导致错误，因为moreThan 期望Reference<number>。

import * as Yup from 'yup';

const schema = Yup.object().shape({
    minPrice: Yup
        .number()
        .positive('Must be positive')
        .integer('Must be an integer')
        .required('Required'),
    maxPrice: Yup
        .number()
        .positive('Must be positive')
        .integer('Must be an integer')
        .moreThan(Yup.ref<number>('minPrice'))
        .required('Required'),
})

---

更新：这需要一个尚未发布的新版本的 yup。在它发布之前，您可以使用：

moreThan(Yup.ref<number>('minPrice') as Reference<number>)