title: How to write types for a nested function in a destructured object?
body: <p>I'm trying to write types for <code>body</code>, <code>header</code> and <code>footer</code> but cannot find a way to access it. Usually I've got these kind of problems when the object is destructured.</p>
  
  <p>From <code>body</code>, <code>header</code> and <code>footer</code> I get the error: 
  "const body: any. 
  Property 'body' does not exist on type '{}'."</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>interface ModalProps {
    onClick: () =&gt; void;
   
  }
  
  const Modal: React.FunctionComponent&lt;ModalProps&gt; = props =&gt; {
    useContext(ModalContext);
    const [isOpen, setIsOpen] = useState(false);
    const [content = {}, setContent] = useState({});
    const show = (content = {}) =&gt; {
      const { body, header, footer } = content;
      if (!body &amp;&amp; !header &amp;&amp; !footer) {
        setContent({ content });
      } else {
        setContent({ body, header, footer });
      }
      setIsOpen(true);
    };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried to insert it in the interface but with no success: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>interface ModalProps {
    onClick: () =&gt; void;
       content: {
       body: any
       }
   
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also tried: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { body, header, footer }: {body: any, header: any, footer: any} = content;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but get the error message: "Type '{}' is missing the following properties from type '{ body: any; header: any; footer: any; }': body, header, footer"</p>
  
  <p>Any hints would be highly appreciated. Thanks!</p>