[typescript] Constrain props type param appropriately in withStyles, withTheme, withWidth HOCs

docs/src/pages/guides/typescript/typescript.md

@@ -8,7 +8,7 @@ Have a look at the [Create React App with TypeScript](https://github.com/mui-org
 The usage of `withStyles` in TypeScript can be a little tricky, so it's worth showing some examples. You can first call `withStyles()` to create a decorator function, like so:
 
 ```js
-const decorate = withStyles(({ palette, spacing }) => ({
+const withMyStyles = withStyles(({ palette, spacing }) => ({
   root: {
     padding: spacing.unit,
     backgroundColor: palette.background.default,
@@ -30,7 +30,7 @@ interface Props {
 Functional components are straightforward:
 
 ```jsx
-const DecoratedSFC = decorate<Props>(({ text, type, color, classes }) => (
+const DecoratedSFC = withMyStyles<Props>(({ text, type, color, classes }) => (
   <Typography variant={type} color={color} classes={classes}>
     {text}
   </Typography>
@@ -42,7 +42,7 @@ Class components are a little more cumbersome. Due to a [current limitation in T
 ```jsx
 import { WithStyles } from 'material-ui/styles';
 
-const DecoratedClass = decorate(
+const DecoratedClass = withMyStyles(
   class extends React.Component<Props & WithStyles<'root'>> {
     render() {
       const { text, type, color, classes } = this.props
@@ -56,45 +56,8 @@ const DecoratedClass = decorate(
 );
 ```
 
-Note that in the class example you didn't need to annotate `<Props>` in the call to `decorate`; type inference took care of everything. However, there are 2 scenarios where you _do_ need to provide an explicit type argument to `decorate`.
-
-Scenario 1: your styled component takes _no_ additional props in addition to `classes`. The natural thing would be to write:
-
-```jsx
-import { WithStyles } from 'material-ui/styles';
-
-const DecoratedNoProps = decorate(
-  class extends React.Component<WithStyles<'root'>> {
-    render() {
-      return (
-        <Typography classes={this.props.classes}>
-          Hello, World!
-        </Typography>
-      );
-    }
-  }
-);
-```
-
-Unfortunately, TypeScript infers the wrong type in this case and you'll have trouble when you go to make an element of this component. In this case, you'll need to provide an explicit `{}` type argument, like so:
-
-```jsx
-import { WithStyles } from 'material-ui/styles';
-
-const DecoratedNoProps = decorate<{}>( // <-- note the type argument!
-  class extends React.Component<WithStyles<'root'>> {
-    render() {
-      return (
-        <Typography classes={this.props.classes}>
-          Hello, World!
-        </Typography>
-      );
-    }
-  }
-);
-```
-
-Scenario 2: `Props` is a union type. Again, to avoid getting a compiler error, you'll need to provide an explict type argument:
+When your `props` are a union, Typescript needs you to explicitly tell it the type, 
+by providing an explicit generic `<Props>` parameter to `withMyStyles`:
 
 ```jsx
 import { WithStyles } from 'material-ui/styles';
@@ -111,7 +74,7 @@ interface Painting {
 
 type Props = Book | Painting;
 
-const DecoratedUnionProps = decorate<Props>( // <-- without the type argument, we'd get a compiler error!
+const DecoratedUnionProps = withMyStyles<Props>( // <-- without the type argument, we'd get a compiler error!
   class extends React.Component<Props & WithStyles<'root'>> {
     render() {
       const props = this.props;
@@ -125,7 +88,6 @@ const DecoratedUnionProps = decorate<Props>( // <-- without the type argument, w
 );
 ```
 
-To avoid worrying about these 2 edge cases, it may be a good habit to always provide an explicit type argument to `decorate`.
 
 ### Injecting Multiple Classes
 

package.json

@@ -46,7 +46,7 @@
     "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha test/**/*.test.js src/{,**/}*.test.js && nyc report --reporter=html",
     "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js --single-run",
     "test:regressions": "webpack --config test/regressions/webpack.config.js && rimraf test/regressions/screenshots/chrome/* && vrtest run --config test/vrtest.config.js --record",
-    "typescript": "tsc -p tsconfig.json",
+    "typescript": "tsc -v && tsc -p tsconfig.json",
     "flow": "flow --show-all-errors",
     "argos": "argos upload test/regressions/screenshots/chrome --token $ARGOS_TOKEN || true",
     "prebuild": "rimraf build",
@@ -187,7 +187,7 @@
     "rimraf": "^2.6.2",
     "sinon": "^4.1.2",
     "size-limit": "0.14.1",
-    "typescript": "^2.6.1",
+    "typescript": "2.6.2",
     "url-loader": "^1.0.1",
     "vrtest": "^0.2.0",
     "webfontloader": "^1.6.28",

src/index.d.ts

@@ -46,6 +46,9 @@ type Diff<T extends string, U extends string> = ({ [P in T]: P } &
 /** @internal */
 export type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
 
+/** @internal */
+export type ConsistentWith<O> = Partial<O> & Record<string, any>;
+
 export namespace PropTypes {
   type Alignment = 'inherit' | 'left' | 'center' | 'right' | 'justify';
   type Color = 'inherit' | 'primary' | 'secondary' | 'default';

src/styles/withStyles.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { WithTheme } from '../styles/withTheme';
+import { Omit, ConsistentWith } from '..';
 import { Theme } from './createMuiTheme';
 
 /**
@@ -28,9 +30,8 @@ export interface WithStylesOptions {
 
 export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 
-export interface WithStyles<ClassKey extends string = string> {
+export interface WithStyles<ClassKey extends string = string> extends Partial<WithTheme> {
   classes: ClassNameMap<ClassKey>;
-  theme?: Theme;
 }
 
 export interface StyledComponentProps<ClassKey extends string = string> {
@@ -41,6 +42,11 @@ export interface StyledComponentProps<ClassKey extends string = string> {
 export default function withStyles<ClassKey extends string>(
   style: StyleRules<ClassKey> | StyleRulesCallback<ClassKey>,
   options?: WithStylesOptions,
-): <P>(
-  component: React.ComponentType<P & WithStyles<ClassKey>>,
-) => React.ComponentType<P & StyledComponentProps<ClassKey>>;
+): {
+  (
+    component: React.ComponentType<WithStyles<ClassKey>>,
+  ): React.ComponentType<StyledComponentProps<ClassKey>>;
+  <P extends ConsistentWith<WithStyles<ClassKey>>>(
+    component: React.ComponentType<P & WithStyles<ClassKey>>,
+  ): React.ComponentType<P & StyledComponentProps<ClassKey>>;
+}

src/styles/withTheme.d.ts

@@ -1,10 +1,11 @@
 import { Theme } from './createMuiTheme';
+import { Omit, ConsistentWith } from '..';
 
 export interface WithTheme {
   theme: Theme;
 }
 
-declare const withTheme: () => <P>(
+declare const withTheme: () => <P extends ConsistentWith<WithTheme>>(
   component: React.ComponentType<P & WithTheme>,
 ) => React.ComponentClass<P>;
 

src/utils/withWidth.d.ts

@@ -1,4 +1,5 @@
 import { Breakpoint } from '../styles/createBreakpoints';
+import { Omit, ConsistentWith } from '..';
 
 export interface WithWidthOptions {
   resizeInterval: number;
@@ -22,6 +23,6 @@ export function isWidthUp(
 
 export default function withWidth(
   options?: WithWidthOptions,
-): <P>(
+): <P extends ConsistentWith<WithWidthProps>>(
   component: React.ComponentType<P & WithWidthProps>,
 ) => React.ComponentClass<P & Partial<WithWidthProps>>;

src/utils/withWidth.spec.tsx

@@ -34,3 +34,10 @@ export class Hello extends React.Component<IHelloProps & WithWidthProps & WithSt
 const Decorated = withWidth()(withStyles(styles)(Hello));
 
 <Decorated name="Bob" />;
+
+const WidthSFC = withWidth()<{
+  // shouldn't need to specify width here; it's a given
+  name: string;
+}>(({ width, name }) => <div style={{ width }}>hello, {name}</div>);
+
+<WidthSFC name="Hortense" />;

test/typescript/components.spec.tsx

@@ -718,7 +718,7 @@ const TableTest = () => {
     );
   }
 
-  return withStyles(styles)<{}>(BasicTable);
+  return withStyles(styles)(BasicTable);
 };
 
 const TabsTest = () => {

test/typescript/styles.spec.tsx

@@ -57,7 +57,7 @@ const ComponentWithChildren: React.SFC<WithStyles<ComponentClassNames>> = ({
   children,
 }) => <div className={classes.root}>{children}</div>;
 
-const StyledExampleThree = withStyles(styleRule)<{}>(ComponentWithChildren);
+const StyledExampleThree = withStyles(styleRule)(ComponentWithChildren);
 <StyledExampleThree />;
 
 // Also works with a plain object

test/typescript/styling-comparison.spec.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Omit } from '../../src';
 import Typography, { TypographyProps } from '../../src/Typography/Typography';
 import { withStyles, WithStyles } from '../../src/styles';
 
@@ -35,7 +36,7 @@ const DecoratedClass = decorate(
   },
 );
 
-const DecoratedNoProps = decorate<{}>(
+const DecoratedNoProps = decorate(
   class extends React.Component<WithStyles<'root'>> {
     render() {
       return <Typography classes={this.props.classes}>Hello, World!</Typography>;
@@ -46,3 +47,33 @@ const DecoratedNoProps = decorate<{}>(
 const sfcElem = <DecoratedSFC text="Hello, World!" variant="title" color="secondary" />;
 const classElem = <DecoratedClass text="Hello, World!" variant="title" color="secondary" />;
 const noPropsElem = <DecoratedNoProps />;
+
+// This is the "scenario 2" example straight from the doc, then invoked:
+
+interface Book {
+  category: 'book';
+  author: string;
+}
+
+interface Painting {
+  category: 'painting';
+  artist: string;
+}
+
+type ArtProps = Book | Painting;
+
+const DecoratedUnionProps = decorate<ArtProps>( // <-- without the type argument, we'd get a compiler error!
+  class extends React.Component<ArtProps & WithStyles<'root'>> {
+    render() {
+      const props = this.props;
+      return (
+        <Typography classes={props.classes}>
+          {props.category === "book" ? props.author : props.artist}
+        </Typography>
+      );
+    }
+  }
+);
+
+const unionPropElem = <DecoratedUnionProps category="book" author="Twain, Mark" />;
+

yarn.lock

@@ -10173,9 +10173,9 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@^2.6.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.8.1.tgz#6160e4f8f195d5ba81d4876f9c0cc1fbc0820624"
+typescript@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
 
 ua-parser-js@^0.7.9:
   version "0.7.17"