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

Question

在我的React应用程序中，我使用Unstated来管理共享状态，但是我在使用TypeScript时遇到了一个问题：<Subscribe>组件向我传递了一个类型为Container<any>的状态实例。这意味着在我可以安全地使用它之前，需要将它转换为我自己的类型，例如Container<MyState>。

相反，如果我希望未声明的容器传递给我一个已经类型化的实例，我应该如何包装和/或派生Unstated source和/或它的typings file，以便当我获得Container实例时，它被类型化为Container<MyState>

顺便说一句，我想要获得一个传入的类型化容器的特殊原因是，这样我就可以使用复杂状态的解构，而不必切换到更冗长的胖箭头函数的块形式。

以下是我希望能够编写的代码的简化示例：

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

下面是我目前的编写方式，在一个使用TypeScript的简化的未声明示例中：

import React from 'react';
import { render } from 'react-dom';
import { Provider, Subscribe, Container } from 'unstated';

interface CounterState {
  count: number
};

class CounterContainer extends Container<CounterState> {
  public state = {
    count: 0
  };

  public increment() {
    this.setState({ count: this.state.count + 1 });
  }

  public decrement() {
    this.setState({ count: this.state.count - 1 });
  }
}

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

render(
  <Provider>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

Answer 1

所以看看最初添加typescript定义的the PR，注意到他们找不到一种方法来自动提供您正在寻找的类型，因为TS中不存在像Flow中那样的like $TupleMap，而您必须手动提供类型。

如果您的主要动机是避免使用箭头函数的额外{}，您可以手动提供类型，并仍然执行相同的解构。因此，从您的示例可以看出：

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中自动输入，但我无能为力。