TypeScript typings

[feimosi]

Any chance of getting TypeScript support?

I've already written simple typings (based on react-redux) covering just my use case. I think that's a good start. I don't have currently time to add the whole API.

declare module 'react-component-queries' {
  import { Component, ComponentClass, ComponentType } from 'react';

  export type Matching<InjectedProps, DecorationTargetProps> = {
    [P in keyof DecorationTargetProps]: P extends keyof InjectedProps
      ? InjectedProps[P] extends DecorationTargetProps[P]
        ? DecorationTargetProps[P]
        : InjectedProps[P]
      : DecorationTargetProps[P]
  };

  export type Shared<
    InjectedProps,
    DecorationTargetProps extends Shared<InjectedProps, DecorationTargetProps>
  > = {
    [P in Extract<
      keyof InjectedProps,
      keyof DecorationTargetProps
    >]?: InjectedProps[P] extends DecorationTargetProps[P] ? DecorationTargetProps[P] : never
  };

  export type GetProps<C> = C extends ComponentType<infer P> ? P : never;

  export type ConnectedComponentClass<C, P> = ComponentClass<JSX.LibraryManagedAttributes<C, P>> & {
    WrappedComponent: C;
  };

  export type InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> = <
    C extends ComponentType<Matching<TInjectedProps, GetProps<C>>>
  >(
    component: C,
  ) => ConnectedComponentClass<
    C,
    Omit<GetProps<C>, keyof Shared<TInjectedProps, GetProps<C>>> & TNeedsProps
  >;

  export type InferableComponentEnhancer<TInjectedProps> = InferableComponentEnhancerWithProps<
    TInjectedProps,
    {}
  >;

  // <------------------------

  export default function componentQueries<TOwnProps = {}, TStateProps = {}>(
    queries: ({ width }: { width: number }) => TStateProps,
  ): InferableComponentEnhancerWithProps<TStateProps, TOwnProps>;
}

[stevemarksd]

+1