根据道具更改 state 的类型 - 反应 Typescript

Question

我有一个表单组件“AddBooking”，它采用以下道具：

type AddBookingProps = { edit?: Booking };

如果传入这个“编辑”道具，我想用设置的值呈现表单。 如果没有传入，它就会变成一个“创建”的空白表单。 这就是我尝试使用 state 的方式。

const [currentBooking, setBooking] = useState<NewBooking | Booking>(
  edit ? edit : emptyBooking
);

emptyBooking 只是一个 NewBooking 类型的空字符串加载，用于初始化 state。

“Booking”和“NewBooking”类型之间的区别在于“Booking”具有必需的“_id”类型，而“NewBooking”没有。 我拥有的用于 editBooking 和 addBooking 的方法分别需要类型“Booking”和“NewBooking”。 这是我得到类型错误的地方：

if (edit) {
      bookingContext.editBooking(currentBooking);
      handleClose();
    } else {
      bookingContext.addBooking({
        ...currentBooking,
        bookedBy: uContext.user.username
      });
      handleClose();
    }

调用 editBooking 时出现类型错误：

'NewBooking | 类型的参数 Booking' 不可分配给“Booking”类型的参数。 “NewBooking”类型中缺少属性“_id”，但在“Booking”类型中是必需的。

任何想法如何在没有“任何”类型的情况下解决这个问题？ 非常感谢

Answer 1

这可能是类型保护https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types的用例

您定义的 function 用于检查_id实际上是否在类型上。 这可能是一种很好的做法，因为您不希望用户编辑尚不存在的预订