injectSheet typings require very verbose usage currently

With the latest 10.0.x typings, any TypeScript usages of injectSheet require very verbose explicit type parameters to get the outer component type right. The biggest pain is that InjectedProps<Styles, Theme> is not exposed, so one has to declare the inner component’s Props as Props & { classes: { [key: string]: string } }.

My suggestion for this would be to expose InjectedProps as WithStyles or a similar name (following the naming convention of packages such as material-ui) and to add defaults to the generic parameters, so the inner styled component could be declared as Props & WithStyles.

The next challenge is that injectSheet itself receives the generic Props type, and passes it to its return type, so TypeScript can’t infer the inner Props from usage. This means that in order to get the correct outer props, injectSheet has to be called as injectSheet<Styles, {}, Props & { classes: { [key: string]: string } }>( styles )( Component ).

My suggestion for this would be to change the definition for injectSheet so that the generic Props type argument is declared on the return type like this:

export default function injectSheet<
  Style extends Styles,
  Theme extends object
>(
  styles: Style,
  options?: Options
): <Props extends InjectedProps<Styles, Theme>>(
  comp: React.ComponentType<Props>
) => React.ComponentType<Omit<Props, InjectedProps<Styles, Theme>>>

That way TypeScript can infer the type of Props from the usage when the return value from injectSheet is called with a Component.

I’d be happy to make these changes in a PR if there is no opposition to them or a better way to work around the current issues.

[HenriBeck]

Should be fixed now, I forgot to omit the props before adding them as optional again.

Usage:

import withStyles, { WithStyles } from 'react-jss';

const styles = {};

interface Props extends WithStyles<typeof styles> {
  isDisabled: boolean,
}

function Comp(props: Props) {
  return <button disabled={props.isDisabled}></button>
}

export default withStyles(styles)(Comp)

[HenriBeck]

I updated the react-jss types: https://github.com/cssinjs/jss/blob/react-jss/update/packages/react-jss/src/index.d.ts

Feel free to have a look; those types should be published by the end of the week.