强类型对象属性依赖于其他对象属性

Question

我正在尝试强类型React Context对象，我希望其中一个属性依赖于另一个属性。例如，我正在制作ModalContext，并使用与Redux操作类似的模式，其中有一个类型和有效载荷，但我称它们为modalType和modalData，这样我就可以通过上下文将数据传递给模态。下面是一些例子。。。

如果是modalType = 'LOGIN MODAL'，则不传递任何数据，只以模态显示登录表单。

如果是modalType = 'RENT MOVIE'，那么是modalData = {movieId: 123456}，所以模态知道要放映哪部电影。

在站点管理上下文中，如果是modalType = 'RESET USER PASSWORD'，则是modalData = {userId: 456789}，因此模态可以显示该用户。

这是我的上下文界面。

interface IModalContext {
visible: boolean; 
modalType:''|'LOGIN MODAL'|'RENT MOVIE'|'EDIT USER'; 
modalData: any; 
}

究竟如何使modalData依赖于modalType的值？

Answer 1

您需要为此使用联合：

type IModalContext = 
| {
visible: boolean;
modalType: 'LOGIN MODAL',
}
| {
visible: boolean;
modalType: 'RENT MOVIE',
modalData: { movieId: number }
}
| ...