Fix setState to work in callback form and to allow partial intellisen…

…se (#22127) * Fix setState to work in callback form and to allow partial intellisense * Fix lint and add tests * Fix more lint * Fixing more lint errors i didnt cause * Add another test case * Fix more lint
DefinitelyTyped · Dec 13, 2017 · 62c2219 · 62c2219
1 parent 77457a9
commit 62c2219
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 13 deletions.
diff --git a/types/react/index.d.ts b/types/react/index.d.ts
@@ -280,11 +280,12 @@ declare namespace React {
     class Component<P, S> {
         constructor(props: P, context?: any);
 
-        // Disabling unified-signatures to have separate overloads. It's easier to understand this way.
-        // tslint:disable-next-line:unified-signatures
-        setState<K extends keyof S>(f: (prevState: Readonly<S>, props: P) => Pick<S, K>, callback?: () => any): void;
-        // tslint:disable-next-line:unified-signatures
-        setState<K extends keyof S>(state: Pick<S, K>, callback?: () => any): void;
+        // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+        // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+        setState<K extends keyof S>(
+            state: ((prevState: Readonly<S>, props: P) => (Pick<S, K> & Partial<S>)) | (Pick<S, K> & Partial<S>),
+            callback?: () => any
+        ): void;
 
         forceUpdate(callBack?: () => any): void;
         render(): ReactNode;

diff --git a/types/react/test/tsx.tsx b/types/react/test/tsx.tsx
@@ -77,3 +77,20 @@ const StatelessComponentWithoutProps: React.SFC = (props) => {
         </React.Fragment>
     </React.Fragment>
 </div>;
+
+class Comp extends React.Component<{}, { foo: boolean, bar: boolean }> {
+    handleSomething = () => {
+      this.setState({ foo: '' }); // $ExpectError
+      this.setState({ foo: true });
+      this.setState({ foo: true, bar: true });
+      this.setState({});
+      this.setState({ foo: true, foo2: true }); // $ExpectError
+      this.setState(() => ({ foo: '' })); // $ExpectError
+      this.setState(() => ({ foo: true }));
+      this.setState(() => ({ foo: true, bar: true }));
+      this.setState(() => ({ foo: true, foo2: true })); // $ExpectError
+      this.setState(() => ({ foo: '', foo2: true })); // $ExpectError
+      this.setState(() => ({ })); // ok!
+      this.setState({ foo: true, bar: undefined}); // $ExpectError
+    }
+}
diff --git a/types/react/v15/index.d.ts b/types/react/v15/index.d.ts
@@ -282,11 +282,12 @@ declare namespace React {
     class Component<P, S> {
         constructor(props?: P, context?: any);
 
-        // Disabling unified-signatures to have separate overloads. It's easier to understand this way.
-        // tslint:disable:unified-signatures
-        setState<K extends keyof S>(f: (prevState: S, props: P) => Pick<S, K>, callback?: () => any): void;
-        setState<K extends keyof S>(state: Pick<S, K>, callback?: () => any): void;
-        // tslint:enable:unified-signatures
+        // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+        // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+        setState<K extends keyof S>(
+            state: ((prevState: Readonly<S>, props: P) => (Pick<S, K> & Partial<S>)) | (Pick<S, K> & Partial<S>),
+            callback?: () => any
+        ): void;
 
         forceUpdate(callBack?: () => any): void;
         render(): JSX.Element | null | false;
@@ -3406,17 +3407,18 @@ declare namespace React {
 
 declare global {
     namespace JSX {
-        // tslint:disable:no-empty-interface
+        // tslint:disable-next-line:no-empty-interface
         interface Element extends React.ReactElement<any> { }
         interface ElementClass extends React.Component<any> {
             render(): JSX.Element | null | false;
         }
         interface ElementAttributesProperty { props: {}; }
         interface ElementChildrenAttribute { children: {}; }
 
+        // tslint:disable-next-line:no-empty-interface
         interface IntrinsicAttributes extends React.Attributes { }
+        // tslint:disable-next-line:no-empty-interface
         interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> { }
-        // tslint:enable:no-empty-interface
 
         interface IntrinsicElements {
             // HTML

diff --git a/types/react/v15/test/index.ts b/types/react/v15/test/index.ts
@@ -294,7 +294,7 @@ myComponent.reset();
 // Refs
 // --------------------------------------------------------------------------
 
-// tslint:disable:no-empty-interface
+// tslint:disable-next-line:no-empty-interface
 interface RCProps { }
 
 class RefComponent extends React.Component<RCProps> {

diff --git a/types/react/v15/test/tsx.tsx b/types/react/v15/test/tsx.tsx
@@ -63,3 +63,20 @@ const StatelessComponentWithoutProps: React.SFC = (props) => {
     return <div />;
 };
 <StatelessComponentWithoutProps />;
+
+class Comp extends React.Component<{}, { foo: boolean, bar: boolean }> {
+    handleSomething = () => {
+      this.setState({ foo: '' }); // $ExpectError
+      this.setState({ foo: true });
+      this.setState({ foo: true, bar: true });
+      this.setState({});
+      this.setState({ foo: true, foo2: true }); // $ExpectError
+      this.setState(() => ({ foo: '' })); // $ExpectError
+      this.setState(() => ({ foo: true }));
+      this.setState(() => ({ foo: true, bar: true }));
+      this.setState(() => ({ foo: true, foo2: true })); // $ExpectError
+      this.setState(() => ({ foo: '', foo2: true })); // $ExpectError
+      this.setState(() => ({ })); // ok!
+      this.setState({ foo: true, bar: undefined}); // $ExpectError
+    }
+}