如何键入接受具有超属性集的Context的Typescript React组件

Question

我正在尝试定义可重用的React组件，这些组件通过道具接受React. Context字段。它们可能不需要父上下文中可用的全部属性，并且，考虑到重用的愿望，可能会封装在具有不同上下文结构的提供程序中（但重用的子组件需要相同的核心属性）。例如，树中较高的父提供程序可能会定义Context类型，如下所示：

type SuperSet = {
    x: number,
    y: number,
    z: number
}

let superSet = {x: 1, y: 2, z: 3}
const SuperSetContext = React.createContext<SuperSet>(superSet)

const SuperSetProvider = (props) => {
  return (
    <SuperSetContext.Provider value={superSet}>
      ...
      {/* Arbitrarily deep nested component in the tree, most likely in a different file*/}
      <SubComponent Context={SuperSetContext} />
    </SuperSetContext.Provider>
  );
}

子组件应该(我相信)能够用较少属性定义一个上下文属性，如下所示

const SubComponent: React.FunctionComponent<{
  Context: React.Context<{x: number, y: number}>
}> = ({ Context }) => {
  const { x, y } = useContext(props./Context);

  return (<div>{x + y}</div>)
}

或通过Pick

Context: React.Context<Pick<SuperSet, 'x' | 'y'>>

然而，当prop在Provider中分配时，上述子组件都会导致类型错误

<SubComponent Context={SuperSetContext} />

Type 'Context<SuperSet>' is not assignable to type 'Context<SubSet>'.
  Types of property 'Provider' are incompatible.
    Type 'Provider<SuperSet>' is not assignable to type 'Provider<SubSet>'.
      Types of parameters 'props' and 'props' are incompatible.
        Type 'ProviderProps<SubSet>' is not assignable to type 'ProviderProps<SuperSet>'.ts(2322)
test.tsx(26, 3): The expected type comes from property 'Context' which is declared here on type 'IntrinsicAttributes & { Context: Context<SubSet>; } & { children?: ReactNode; }'

我创建了一个Typescript Playground，在没有jsx的情况下对其进行测试，但无论使用jsx，都会发生这种情况。此外，我在天真的泛型类/函数中没有看到相同的行为。

那么，有没有办法用子集或上下文属性或不同的范例来定义子组件的上下文定义，以完成相同的设计并避免这种特定的类型不匹配呢？

Answer 1

在这种情况下，您应该使用通用组件（SubComponent），因为TS就在这里：您不能假设React.Context

function SubComponent<T extends { x: number, y: number }>(props: {
  context: React.Context<T>
}) {
  const { x, y } = React.useContext(props.context);

  return (<div>{x + y}</div>)
}

你可以在操场上看到完整的例子:操场链接

Answer 2

如果您声明您自己的扩展React. Context的接口

interface MyContext<T> extends React.Context<T> {} // this does the trick

const SubComponent: React.FunctionComponent<{
  // use MyContext instead of React.Context
  Context: MyContext<{x: number, y: number}> 
}> = ({ Context }) => {
  const { x, y } = React.useContext(Context);

  return <div>{x + y}</div>;
};


// Now pass a SuperSet

type SuperSet = {
  x: number;
  y: number;
  z: number;
};
let superSet = { x: 1, y: 2, z: 3 };

const SuperSetContext = React.createContext<SuperSet>(superSet);
const SuperSetProvider = props => {
  return (
    <SuperSetContext.Provider value={superSet}>
      {/* No TS error! */}
      <SubComponent Context={SuperSetContext} />  
    </SuperSetContext.Provider>
  );
};

你可以在这个沙盒里看看

老实说，我无法解释导致行为差异的原因。