Using Unstated with TypeScript and React, how to get a typed container instance inside <Subscribe> children?

Question

In my React app, I'm using Unstated to manage shared state, but I'm running into a problem using this with TypeScript: the <Subscribe> component passes me an instance of my state that's typed as Container<any>. This means it will need to be cast to my own type, e.g. Container<MyState>, before I can safely use it.

If instead I wanted Unstated to pass me an already-typed instance of my container, how should I wrap and/or fork the Unstated source and/or its typings file so that when I get the Container instance, it's typed as Container<MyState>?

BTW, the particular reason why I want to get a passed-in typed container is so that I can use destructuring of complex state without having to switch to using the block form of fat-arrow functions which is much more verbose.

Here's a simplified example of the code that I'd like to be able to write:

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

And here's the current way I'm writing it, inside a simplified Unstated example using 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

So looking at the PR that originally added the typescript definition, it is noted that they couldn't find a way to provide the typing automatically that you are looking for, since something like $TupleMap doesn't exist in TS like it does in Flow, and you instead have to manually provide the typing.

If your primary motivation is avoiding the extra {} with the arrow function, you can manually provide the typing and still do the same destructuring. So from your example:

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>
  );
}

works as well. Maybe there is a way to type this automatically in Typescript, but it's beyond me.