Typesafe React装饰器无法识别所传递函数的ReturnType

Question

I'm trying to extend the redux connect so it can be used with particular reducer/state as a decorator, it's probably not necessary because redux connect can be used as a decorator, but I am curious why I can't make it work the way I want.

This is the HOC that I am using as a decorator:

interface InjectedProps { userId: string; }
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => InjectedProps;
export function withUserSetting(
  stateToProps?: StateToProps
): <P extends InjectedProps>(WrappedComponent: ComponentType<P>) => void {
  return <P extends InjectedProps>(Comp: ComponentType<P>) => {
    class NewComponent extends (Component || PureComponent)<P> {
      render() {
        return <Comp {...this.props} />;
      }
    }
    return connect(stateToProps)(NewComponent as any);
  };
}

It works fine and it will alert me if the Props is missing, that's because it expecting return type of 'InjectedProps':

however, I would like to modify hoc so it can alert me based on the return type of the 'stateToProps':

type AnyFunction = (...args: any[]) => any;
type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type StateToProps = (setting: ApplicationState) => { [key: string]: any };
export function withUserSetting<T extends AnyFunction>(
  stateToProps?: StateToProps
): <P extends ReturnType<T>>(WrappedComponent: ComponentType<P>) => void {
  return <P extends ReturnType<T>>(Comp: ComponentType<P>) => {
    class NewComponent extends (Component || PureComponent)<P> {
      render() {
        return <Comp {...this.props} />;
      }
    }
    return connect(stateToProps)(NewComponent as any);
  };
}

as you can see the 'InjectedProps' is not required anymore so it can have any prop name, and I am assuming because of the 'ReturnType' decorator should recognize props automatically and alert me if it's not declared for the component, but it doesn't have any effect:

decorator works fine, however, I don't have a type safety I am looking for! any idea why it's not working?

Answer 1

After simplifying the code, and understand it better, I have managed to make it work, this is the working version:

type ComponentType<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
type MapStateToProps<T> = (setting: ApplicationState) => T;
export function withUserSetting<T>(mapStateToProps?: MapStateToProps<T>):
  <P extends T>(WrappedComponent: ComponentType<P>) => void {
  return <P extends T>(WrappedComponent: ComponentType<P>) => {
    return connect(mapStateToProps)(WrappedComponent as any);
  };
}

Now it can be used like this:

@withUserSetting((state) => ({ userId: state.userSetting.userId }))

Or like this:

@withUserSetting<UserProps>((state) => ({ userId: state.userSetting.userId }))

In both ways, it will raise an error if a property is missing in the declaration.