use "reverse" defaultProp type pattern

cedev935 · web-flow · commit b6cb57cbf271 · 2019-04-09T01:29:36.000-04:00
as suggested in typescript-cheatsheets/react#103
diff --git a/README.md b/README.md
@@ -432,24 +432,24 @@ const Greet = (props: Props) => {
   /*...*/
 };
 Greet.defaultProps = defaultProps
+```
 
-// ////////////////
-// class components
-// ////////////////
-export type Props = {
-  name: string;
-};
+For **Class components**, there are [a couple ways to do it](https://github.com/sw-yx/react-typescript-cheatsheet/pull/103#issuecomment-481061483)(including using the `Pick` utility type) but the recommendation is to "reverse" the props definition:
 
-export class Greet extends React.Component<Props> {
-  render() {
-    const { name } = this.props;
-    return <div>Hello ${name.toUpperCase()}!</div>;
+```tsx
+type GreetProps = typeof Greet.defaultProps & {
+  age: number
+}
+
+class Greet extends React.Component<GreetProps> {
+  static defaultProps = {
+    name: 'world'
   }
-  static defaultProps: Partial<Props> = { name: 'world' };
+  /*...*/
 }
 
 // Type-checks! No type assertions needed!
-let el = <Greet />;
+let el = <Greet age={3} />;
 ```
 <details>
   <summary>Why does React.FC break defaultProps?</summary>
