Merge pull request #17289 from morcerf/morcerf-react-make-ref-nullable

@types/react: Updated Ref signature to handle null cases

types/react-smooth-scrollbar/react-smooth-scrollbar-tests.tsx

@@ -5,10 +5,12 @@ import * as SmoothScrollbar from "react-smooth-scrollbar";
 <SmoothScrollbar speed={10} overscrollEffect="bounce" />;
 
 class Test extends React.Component<void, void> {
-    ref: SmoothScrollbar;
+    ref: SmoothScrollbar | null;
 
     componentDidMount() {
-        this.ref.scrollbar.scrollTo(0, 500);
+        if (this.ref) {
+            this.ref.scrollbar.scrollTo(0, 500);
+        }
     }
 
     render() {

types/react-svg-pan-zoom/react-svg-pan-zoom-tests.tsx

@@ -8,21 +8,29 @@ import {
 } from 'react-svg-pan-zoom';
 
 class Example1 extends React.Component<{}, {}> {
-  Viewer: ReactSVGPanZoom;
+  Viewer: ReactSVGPanZoom | null;
   constructor(props: Props) {
     super(props);
   }
 
   componentDidMount() {
-    this.Viewer.fitToViewer();
+    if (this.Viewer) {
+      this.Viewer.fitToViewer();
+    }
   }
 
   render() {
     return (
       <div>
-        <button onClick={event => this.Viewer.zoomOnViewerCenter(1.1)}>Zoom in</button>
-        <button onClick={event => this.Viewer.fitSelection(40, 40, 200, 200)}>Zoom area 200x200</button>
-        <button onClick={event => this.Viewer.fitToViewer()}>Fit</button>
+        <button onClick={event => this.Viewer && this.Viewer.zoomOnViewerCenter(1.1)}>
+          Zoom in
+        </button>
+        <button onClick={event => this.Viewer && this.Viewer.fitSelection(40, 40, 200, 200)}>
+          Zoom area 200x200
+        </button>
+        <button onClick={event => this.Viewer && this.Viewer.fitToViewer()}>
+          Fit
+        </button>
 
         <hr/>
 

types/react/index.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for React v15.0
 // Project: http://facebook.github.io/react/
-// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>, John Reilly <https://github.com/johnnyreilly/>, Benoit Benezech <https://github.com/bbenezech>, Patricio Zavolinsky <https://github.com/pzavolinsky>, Digiguru <https://github.com/digiguru>, Eric Anderson <https://github.com/ericanderson>
+// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>, John Reilly <https://github.com/johnnyreilly/>, Benoit Benezech <https://github.com/bbenezech>, Patricio Zavolinsky <https://github.com/pzavolinsky>, Digiguru <https://github.com/digiguru>, Eric Anderson <https://github.com/ericanderson>, Albert Kurniawan <https://github.com/morcerf>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.2
 
@@ -29,7 +29,7 @@ declare namespace React {
     type ComponentType<P> = ComponentClass<P> | StatelessComponent<P>;
 
     type Key = string | number;
-    type Ref<T> = string | ((instance: T) => any);
+    type Ref<T> = string | ((instance: T | null) => any);
     type ComponentState = {} | void;
 
     interface Attributes {
@@ -447,7 +447,7 @@ declare namespace React {
      * `createElement` or a factory, use `ClassAttributes<T>`:
      *
      * ```ts
-     * var b: Button;
+     * var b: Button | null;
      * var props: ButtonProps & ClassAttributes<Button> = {
      *     ref: b => button = b, // ok!
      *     label: "I'm a Button"
@@ -2266,7 +2266,7 @@ declare namespace React {
         target?: string;
         type?: string;
         width?: number | string;
-                  
+
         // Other HTML properties supported by SVG elements in browsers
         role?: string;
         tabIndex?: number;

types/react/test/index.ts

@@ -112,7 +112,7 @@ class ModernComponent extends React.Component<Props, State>
     }
 
     private _myComponent: MyComponent;
-    private _input: HTMLInputElement;
+    private _input: HTMLInputElement | null;
 
     render() {
         return React.DOM.div(null,
@@ -199,7 +199,7 @@ React.cloneElement(element, {}, null);
 var clonedElement2: React.CElement<Props, ModernComponent> =
     // known problem: cloning with key or ref requires cast
     React.cloneElement(element, <React.ClassAttributes<ModernComponent>>{
-        ref: c => c.reset()
+        ref: c => c && c.reset()
     });
 var clonedElement3: React.CElement<Props, ModernComponent> =
     React.cloneElement(element, <{ foo: number } & React.Attributes>{
@@ -288,18 +288,18 @@ class RefComponent extends React.Component<RCProps, {}> {
     }
 }
 
-var componentRef: RefComponent = new RefComponent();
+var componentRef: RefComponent | null = new RefComponent();
 RefComponent.create({ ref: "componentRef" });
 // type of c should be inferred
 RefComponent.create({ ref: c => componentRef = c });
 componentRef.refMethod();
 
-var domNodeRef: Element;
+var domNodeRef: Element | null;
 React.DOM.div({ ref: "domRef" });
 // type of node should be inferred
 React.DOM.div({ ref: node => domNodeRef = node });
 
-var inputNodeRef: HTMLInputElement;
+var inputNodeRef: HTMLInputElement | null;
 React.DOM.input({ ref: node => inputNodeRef = <HTMLInputElement>node });
 
 //

types/redux-devtools/redux-devtools-tests.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { compose, createStore, Reducer, Store, StoreEnhancerStoreCreator } from 'redux'
+import { compose, createStore, Reducer, Store, GenericStoreEnhancer } from 'redux'
 import { Provider } from 'react-redux'
 import { createDevTools, persistState } from 'redux-devtools'
 
@@ -12,10 +12,12 @@ const DevTools = createDevTools(
   <DevToolsMonitor />
 )
 
-const finalCreateStore = compose(
+const storeEnhancer = compose(
   DevTools.instrument(),
   persistState('test-session')
-)(createStore)
+) as GenericStoreEnhancer
+
+const finalCreateStore = storeEnhancer(createStore)
 
 const store: Store<any> = finalCreateStore(reducer)