[typescript] add sample with return types

[yacut]

With typescript 2.8+ ReturnType feature could by used.

[hexetia]

this partially work for me, the ReturnType can correctly infer the properties names, but that affect the css type safety '-'

import * as React from "react";
import { Theme, withStyles, WithStyles } from "@material-ui/core/styles";

const styles = (theme: Theme) => ({
	one: {
		backgroundColor: "red",
		textAlign: 'center'
	},
	two: {
		backgroundColor: "pink"
	}
});

interface Props {
	someProp: string;
}

class SomeComponent extends React.Component<Props & WithStyles<keyof ReturnType<typeof styles>>, {}> {
	render() {
		return <span className={this.props.classes.xxx}>maria</span>;
	}
}

export default withStyles(styles)<Props>(SomeComponent);

broken css type safety

[hexetia]

with a little helper function(found in https://stackoverflow.com/a/49539369) the css type safety works in a beautiful way 😍

import * as React from "react";
import { Theme, withStyles, WithStyles } from "@material-ui/core/styles";
import {CSSProperties} from "@material-ui/core/styles/withStyles";

function createStyleMap<T extends { [name: string]: CSSProperties }>(cfg: T) : Record<keyof T, CSSProperties> {
	return cfg;
}

const styles = (theme: Theme) => createStyleMap({
	one: {
		backgroundColor: "red",
		textAlign: 'center'
	},
	two: {
		backgroundColor: "pink"
	}
});

interface Props {
	someProp: string;
}

class SomeComponent extends React.Component<Props & WithStyles<keyof ReturnType<typeof styles >>, {}> {
	render() {
		return <span className={this.props.classes.two}>maria</span>;
	}
}

export default withStyles(styles)<Props>(SomeComponent);

[pelotom]

This looks good to me. As far as the helper method for defeating TypeScript type widening, I think this is useful enough that we should consider adding it to the core library (even though for JS users it's useless, since it's just the identity function!) But that should probably be a separate PR.

[pelotom]

#11609 adds a styles creation helper similar to that proposed by @saculbr; take a look at the updated TypeScript guide there and feel free to comment.