使用Flow和redux-navigation验证通用的React组件属性

Question

I'm trying to validate that React components are receiving the correct properties when a new screen action is dispatched.

Routes may look like this.

class MyCompAB extends React.Component<{a: number, b: string}> {}
class MyCompCD extends React.Component<{c: number, d: string}> {}
const myRoutes = {'/ab': MyCompAB, '/cd': MyCompCD};

An what I need is something like this. I just have not found the way to make openScreen validate that props are good for routes[name].

type Screen<P> = ComponentType<P>;
type Routes<P> = {[key: string]: Screen<P>};

function openScreen<P, R: Routes<mixed>, K: $Keys<R>>(routes: R, name: K, props: P): void {
  // This needs to validate that props are valid for the component in routes[name].
  // This won't do <Component {...props} />. Instead redux dispatch magic happens here.
  type Pepe = $Call<R<P>, K>;
}

// $ExpectError. Should fail: a and b missing.
openScreen(myRoutes, '/ab', {});
// $ExpectError. Should fail: b has wrong type.
openScreen(myRoutes, '/ab', {a: 1, b: 1});
// Should work.
openScreen(myRoutes, '/ab', {a: 1, b: "1"});

// $ExpectError. Should fail: c and d missing.
openScreen(myRoutes, '/cd', {});
// $ExpectError. Should fail: d has wrong type.
openScreen(myRoutes, '/cd', {c: 1, d: 1});
// Should work.
openScreen(myRoutes, '/cd', {c: 1, d: "1"});

How do I make this work?

Answer 1

You can use function overloading for a slightly suboptimal solutions like this:

declare function openScreen<P: $PropertyType<MyCompAB, 'props'>, R: Routes<mixed>, K: '/ab'>(routes: R, name: K, props: P): void {

}

declare function openScreen<P: $PropertyType<MyCompCD, 'props'>, R: Routes<mixed>, K: '/bc'>(routes: R, name: K, props: P): void {

}