Fix withStyles typing for class components; remove usage as TS decora…

…tor (mui#8561)

* Fix withStyles typing for class components; remove usage as TS decorator
* Remove unnecessary non-null assertion

src/styles/withStyles.d.ts

@@ -26,22 +26,6 @@ export type WithStyles<ClassKey extends string = string> = {
 export default function withStyles<ClassKey extends string>(
   style: StyleRules<ClassKey> | StyleRulesCallback<ClassKey>,
   options?: WithStylesOptions
-): {
-  /**
-   * Decorating a stateless functional component.
-   */
-  <P>(
-    component: React.StatelessComponent<P & WithStyles<ClassKey>>
-  ): StyledComponent<P, ClassKey>;
-
-  /**
-   * Decorating a class component. This is slightly less type safe than the
-   * function decoration case, due to current restrictions on TypeScript
-   * decorators (https://github.com/Microsoft/TypeScript/issues/4881). The
-   * upshot is that one has to use the non-null assertion operator (`!`) when
-   * accessing `props.classes`.
-   */
-  <P, C extends React.ComponentClass<P & StyledComponentProps<ClassKey>>>(
-    component: C
-  ): C;
-};
+): <P>(
+  component: React.ComponentType<P & WithStyles<ClassKey>>
+) => StyledComponent<P, ClassKey>;

test/typescript/components.spec.tsx

@@ -53,6 +53,7 @@ import Table, {
 } from '../../src/Table';
 import { withStyles, StyleRulesCallback } from '../../src/styles';
 import { withResponsiveFullScreen, DialogProps } from '../../src/Dialog';
+import { WithStyles } from '../../src/styles/withStyles';
 
 const log = console.log;
 const FakeIcon = () => <div>ICON</div>;
@@ -717,7 +718,7 @@ const TabsTest = () => {
     },
   });
 
-  class BasicTabs extends React.Component<{ classes: { root: string } }> {
+  class BasicTabs extends React.Component<WithStyles<'root'|'button'>> {
     state = {
       value: 0,
     };

test/typescript/styles.spec.tsx

@@ -120,15 +120,17 @@ const AllTheStyles: React.SFC<AllTheProps> = ({ theme, classes }) => (
 
 const AllTheComposition = withTheme(withStyles(styles)(AllTheStyles));
 
-@withStyles(styles)
-class DecoratedComponent extends React.Component<
-  ComponentProps & StyledComponentProps<'root'>
-> {
-  render() {
-    const { classes, text } = this.props;
-    return <div className={classes!.root}>{text}</div>;
+// Can't use withStyles effectively as a decorator in TypeScript
+// due to https://github.com/Microsoft/TypeScript/issues/4881
+//@withStyles(styles)
+const DecoratedComponent = withStyles(styles)(
+  class extends React.Component<ComponentProps & WithStyles<'root'>> {
+    render() {
+      const { classes, text } = this.props;
+      return <div className={classes.root}>{text}</div>;
+    }
   }
-}
+);
 
 // no 'classes' property required at element creation time (#8267)
 <DecoratedComponent text="foo" />;