我有两种类型的 React 上下文,我需要能够确定它们的类型(移动和桌面)。我怎样才能以类型安全的方式这样做?
我尝试编写一个利用以下属性的用户定义类型保护:React.Context<LayoutContextType>
相当于React.Context<DesktopLayoutContextType> | React.Context<MobileLayoutContextType>
.
但是,我似乎误以为它们是等价的。
interface ILayoutStateBase {
nightMode: boolean
}
interface ILayoutContextBase<
StateType extends ILayoutStateBase,
Kind extends 'desktop' | 'mobile'
> {
kind: Kind
state: StateType
}
interface IDesktopState extends ILayoutStateBase {
modalOpen: boolean
}
interface IMobileState extends ILayoutStateBase {
sidebarOpen: boolean
}
type DesktopLayoutContextType = ILayoutContextBase<IDesktopState, 'desktop'>
type MobileLayoutContextType = ILayoutContextBase<IMobileState, 'mobile'>
type LayoutContextType =
| DesktopLayoutContextType
| MobileLayoutContextType
// below results in:
/**
* Type 'Context<ILayoutContextBase<IDesktopState, "desktop">>'
* is not assignable to type 'Context<LayoutContextType>'.
*/
const isDesktopLayout = (
ctx: React.Context<LayoutContextType>
): ctx is React.Context<DesktopLayoutContextType> => {
return true // how can I do this?
}
我希望 TypeScript 能够识别 React.Context<LayoutContextType>
相当于React.Context<DesktopLayoutContextType> | React.Context<MobileLayoutContextType>
并允许我使用 displayName 属性来区分它们。
但是,我在提供的代码中收到错误消息:
Type 'Context<ILayoutContextBase<IDesktopState, "desktop">>' is not assignable to type 'Context<LayoutContextType>'.
最佳答案
提前抱歉,因为我的回答可能不完整,但可能会有所帮助。
为什么下面的代码无法编译?
const isDesktopLayout = ( ctx: React.Context<LayoutContextType> ): ctx is React.Context<DesktopLayoutContextType> => { return true // how can I do this? }
让我们看看
React.Context<T>
类型。它有Provider
和Consumer
两者都使用类型T
并将其用作参数类型props
.T
不在任何地方使用,除了作为参数类型。这会导致编译错误。要了解原因,请查看下面的简化示例。这是一个函数,它接受回调。
function f1 (callback: ((props: string | boolean) => void)) {}
正在尝试调用
f1
与callback
以下回调会报错f1((props: string) => {}); // Type string | boolean is not assignable to type string
当您尝试编写类型保护时,本质上会发生相同的情况。
React.Context<LayoutContextType>
有Provider
和Consumer
定义为接受props
的函数类型LayoutContextType
(有一些修改,但这并不重要)。而且您不能分配上下文React.Context<DesktopLayoutContextType>
与Provider
和Consumer
定义为接受props
的函数类型DesktopLayoutContextType
.幸运的是,这个问题很容易通过使用上下文联合来解决,如下所示
const isDesktopLayout = ( ctx: React.Context<DesktopLayoutContextType> | React.Context<MobileLayoutContextType> ): ctx is React.Context<DesktopLayoutContextType> => { return true // how can I do this? }
第二个问题更难解决。类型保护在运行时用于查找
ctx
的类型.但是React.Context<DesktopLayoutContextType>
之间的唯一区别和React.Context<MobileLayoutContextType>
是参数的类型。在运行时,无法找到回调函数想要接受的参数类型。由于 JavaScript 是动态语言,可以使用任意数量的任意类型的参数调用回调。我们无法提前知道参数的类型和数量。因此在运行时区分上下文的一种方法可以是
diplayName
属性(property)(如您所建议的)。它应该在上下文创建期间设置,之后不能更改,并在类型保护中检查。可以这样做const isDesktopLayout = ( ctx: React.Context<DesktopLayoutContextType> | React.Context<MobileLayoutContextType> ): ctx is React.Context<DesktopLayoutContextType> => { if (ctx.displayName === undefined) throw 'context displayName is undefined!' return ctx.displayName === 'desktop' }
但此解决方案未绑定(bind)到类型,而是绑定(bind)到
displayName
的值可以在代码中的任何地方更改,这可能会导致错误。
关于reactjs - 如何区分 React 上下文的并集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57025059/