[docs] TypeScript example project and guide to withStyles

[pelotom]

This includes a port of the create-react-app-with-flow example to TypeScript, as well as a guide to using withStyles. Resolves #8598.

[oliviertassinari]

@pelotom Thanks, this is a great first iteration! Let's see the feedback we can get :).

[stevegeek]

@pelotom Thanks for the work on this Guide. Quick question, why when using some JSS properties such as justifyContent I seemingly need to specify the value with a as cast, for example 'center' as 'center' to avoid

          Types of property 'justifyContent' are incompatible.
            Type 'string' is not assignable to type '"center" | "initial" | "inherit" | "unset" | "flex-start" | "flex-end" | "space-between" | "space...'.

Is this something you have encountered?

[pelotom]

@stevegeek I'm going to guess your code looks something like this:

const decorate = withStyles(theme => ({
  root: {
    justifyContent: 'center'
  }
}));

The problem is that TypeScript is inferring the type of justifyCenter to be string, even though you'd hope it would be able to figure out that you want it to have the literal type center. There are a number of ways to nudge it so it figures things out:

const styles: StyleRulesCallback<'root'> = theme => ({
  root: {
    justifyContent: 'center'
  }
});

const decorate = withStyles(styles);

const decorate = withStyles(theme => ({
  root: {
    justifyContent: 'center'
  } as React.CSSProperties
}));

const decorate = withStyles<'root'>(theme => ({
  root: {
    justifyContent: 'center'
  }
}));

[stevegeek]

@pelotom Interesting, thanks for that. I wonder why it seems to be able to infer the string as the type literals in certain cases and not others (eg textAlign seems fine`). Anyway thats for the examples, very useful!

[pelotom]

I opened a TypeScript bug about this: microsoft/TypeScript#19360

[pelotom]

@stevegeek textAlign "works" because they gave up on trying to make it type safe:

textAlign?: CSSWideKeyword | any;

Note the | any 😕

[stevegeek]

@pelotom Great, interesting to see what they say