fixed inferred type of component with default props -> when nullable property is provided a default it should be asserted as not nullable for component interface

resolved piotrwitek#43

Author: piotrwitek

playground/src/components/stateful-counter-with-default.tsx

@@ -13,41 +13,40 @@ interface State {
   count: number;
 }
 
-export class StatefulCounterWithDefault extends React.Component<StatefulCounterWithDefaultProps, State> {
-  // to make defaultProps strictly typed we need to explicitly declare their type
-  // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
-  static defaultProps: DefaultProps = {
-    initialCount: 0,
-  };
-
-  props: StatefulCounterWithDefaultProps & DefaultProps;
+export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWithDefaultProps> =
+  class extends React.Component<StatefulCounterWithDefaultProps & DefaultProps> {
+    // to make defaultProps strictly typed we need to explicitly declare their type
+    // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
+    static defaultProps: DefaultProps = {
+      initialCount: 0,
+    };
+
+    state: State = {
+      count: this.props.initialCount,
+    };
+
+    componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
+      if (initialCount != null && initialCount !== this.props.initialCount) {
+        this.setState({ count: initialCount });
+      }
+    }
 
-  state: State = {
-    count: this.props.initialCount,
-  };
+    handleIncrement = () => {
+      this.setState({ count: this.state.count + 1 });
+    }
 
-  componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
-    if (initialCount != null && initialCount !== this.props.initialCount) {
-      this.setState({ count: initialCount });
+    render() {
+      const { handleIncrement } = this;
+      const { label } = this.props;
+      const { count } = this.state;
+
+      return (
+        <div>
+          <span>{label}: {count} </span>
+          <button type="button" onClick={handleIncrement}>
+            {`Increment`}
+          </button>
+        </div>
+      );
     }
-  }
-
-  handleIncrement = () => {
-    this.setState({ count: this.state.count + 1 });
-  }
-
-  render() {
-    const { handleIncrement } = this;
-    const { label } = this.props;
-    const { count } = this.state;
-
-    return (
-      <div>
-        <span>{label}: {count} </span>
-        <button type="button" onClick={handleIncrement}>
-          {`Increment`}
-        </button>
-      </div>
-    );
-  }
-}
+  };

playground/src/components/stateful-counter-with-default.usage.tsx

@@ -5,6 +5,5 @@ import { StatefulCounterWithDefault } from '@src/components';
 export default () => (
   <StatefulCounterWithDefault
     label={'StatefulCounter'}
-    initialCount={10}
   />
 );