reactjs - 如何区分 React 上下文的并集

Question

我有两种类型的 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>'.

Answer 1

提前抱歉，因为我的回答可能不完整，但可能会有所帮助。

1. 为什么下面的代码无法编译？

   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?
   }
   

2. 第二个问题更难解决。类型保护在运行时用于查找 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 的值可以在代码中的任何地方更改，这可能会导致错误。