Question

在我的React应用程序中，我正在使用Unstated来管理共享状态，但是在使用TypeScript时遇到了一个问题：<Subscribe>组件向我传递了一个状态实例，即键入为Container<any>。这意味着需要将其强制转换为我自己的类型，例如Container<MyState>，然后才能安全使用它。

相反，如果我想让Unstated传递给我我容器的一个已经键入的实例，那么我应该如何包装和/或派生Unstated source和/或其typings file，以便在得到{ {1}}实例，它键入为Container吗？

顺便说一句，我想要获得传入的类型化容器的特定原因是，这样我可以使用复杂状态的分解，而不必切换到使用FAT-arrow函数的块形式，而后者更加冗长。

这是我想要编写的代码的简化示例：

Container<MyState>

这是我目前使用TypeScript编写的简化状态示例中的写法：

function Counter() {
  return (
    <Subscribe to={[CounterContainer]}>
      {({increment, decrement, state}) => (
        <div>
          <button onClick={() => decrement()}>-</button>
          <span>{state.count}</span>
          <button onClick={() => increment()}>+</button>
        </div>
      )}
    </Subscribe>
  );
}

Answer 1

因此，在查看最初添加了打字稿定义的the PR时，请注意，由于like $TupleMap并没有提供自动提供键入内容的方法，因此他们找不到存在于TS中，就像在Flow中一样，而您必须手动提供键入。

如果您的主要动机是避免使用带有箭头功能的多余{}，则可以手动提供键入内容，并且仍然进行相同的解构。因此，从您的示例开始：

function Counter() {
  return (
    <Subscribe to={[CounterContainer]}>
      {({increment, decrement, state}: CounterContainer) => (
          <div>
            <button onClick={() => increment()}>-</button>
            <span>{state.count}</span>
            <button onClick={() => decrement()}>+</button>
          </div>
        )
      }
    </Subscribe>
  );
}

也可以。也许有一种方法可以在Typescript中自动键入此内容，但是这超出了我的范围。

结合使用Unstated和TypeScript和React，如何在<subscribe>子级中获取类型化的容器实例？

1 个答案: