title: typescript: a component must have open()
body: <p>I'm making modal component which controlled by redux so I inject a modal component's ref by dispatching an <code>SET_MODAL</code> so modal component can be changed by using it.</p>
  
  <pre class="lang-js prettyprint-override"><code>dispatch(setModal(modalComponentRef));
  
  // reducer
  const reducer = (state, action) =&gt; {
      if (action.type === "SET_MODAL") {
        return {
          ...state,
          modal: action.payload.modal,
        }
      }
  }
  </code></pre>
  
  <p>And then call modal component by dispatching an action <code>SHOW_MODAL</code></p>
  
  <pre class="lang-js prettyprint-override"><code>const onOpen = () =&gt; { ... }
  dispatch(showModal(onOpen));
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>const reducer = (state, action) =&gt; {
    if (action.type === "SHOW_MODAL") {
      return state.modal.open(action.payload.onOpen);
    }
  }
  </code></pre>
  
  <p>modal component should open by calling its function <code>open()</code></p>
  
  <pre class="lang-js prettyprint-override"><code>const Modal = (props) =&gt; {
    const [isOpen, setIsOpen] = useState(false);
    const open = (onOpen) =&gt; {
       setIsOpen(true);
       onOpen();
    }
    return {
      isOpen &amp;&amp; (
        &lt;div&gt;
          // ...
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>In this case I want to force react component must have <code>open: () =&gt; void</code> how to do it by defining type definition? </p>
  
  <pre class="lang-js prettyprint-override"><code>// modalComponentRef must have open()
  dispatch(setModal(modalComponentRef));
  </code></pre>