<p dir="auto">Move Destructor into the React namespace so my typescript can use it.</p>
<p dir="auto">React version: 17.0.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">I want to create functional hook components that replace commonly duplicated code - for instance, I am commonly using my event bus.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// somewhere...
const AppContext = createContext&lt;{ eventbus: EventEmitter }&gt;({ eventbus: new EventEmitter() })
// elsewhere...
const { eventBus } = useContext(AppContext)
useEffect(() =&gt; {
  if (!eventBus) return
  if (!otherThing) return
  if (someStateThing) eventBus.emit(&quot;setup&quot;, otherThing.bit(someStateThing))
  return (): void =&gt; void eventBus.emit(&quot;cleanup&quot;, otherThing.bit(someStateThing))
}, [ eventBus, otherThing, someStateThing ] )"><pre class="notranslate"><span class="pl-c">// somewhere...</span>
<span class="pl-k">const</span> <span class="pl-smi">AppContext</span> <span class="pl-c1">=</span> <span class="pl-en">createContext</span><span class="pl-kos">&lt;</span><span class="pl-kos">{</span> <span class="pl-c1">eventbus</span>: <span class="pl-smi">EventEmitter</span> <span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">eventbus</span>: <span class="pl-k">new</span> <span class="pl-smi">EventEmitter</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-c">// elsewhere...</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> eventBus <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">useContext</span><span class="pl-kos">(</span><span class="pl-smi">AppContext</span><span class="pl-kos">)</span>
<span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">eventBus</span><span class="pl-kos">)</span> <span class="pl-k">return</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">otherThing</span><span class="pl-kos">)</span> <span class="pl-k">return</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">someStateThing</span><span class="pl-kos">)</span> <span class="pl-s1">eventBus</span><span class="pl-kos">.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s">"setup"</span><span class="pl-kos">,</span> <span class="pl-s1">otherThing</span><span class="pl-kos">.</span><span class="pl-en">bit</span><span class="pl-kos">(</span><span class="pl-s1">someStateThing</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-c1">=&gt;</span> <span class="pl-k">void</span> <span class="pl-s1">eventBus</span><span class="pl-kos">.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s">"cleanup"</span><span class="pl-kos">,</span> <span class="pl-s1">otherThing</span><span class="pl-kos">.</span><span class="pl-en">bit</span><span class="pl-kos">(</span><span class="pl-s1">someStateThing</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span> <span class="pl-s1">eventBus</span><span class="pl-kos">,</span> <span class="pl-s1">otherThing</span><span class="pl-kos">,</span> <span class="pl-s1">someStateThing</span> <span class="pl-kos">]</span> <span class="pl-kos">)</span></pre></div>
<p dir="auto">But I want to compose something I can use like this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="useEffectWithEventBus((eventBus) =&gt; {
  if (!otherThing) return
   eventBus.emit(otherThing.bit(someStateThing))
   (): void =&gt; void eventBus.emit(&quot;cleanup&quot;, otherThing.bit(someStateThing))
}, [otherThing, someStateThing])"><pre class="notranslate"><span class="pl-en">useEffectWithEventBus</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">eventBus</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">otherThing</span><span class="pl-kos">)</span> <span class="pl-k">return</span>
   <span class="pl-s1">eventBus</span><span class="pl-kos">.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s1">otherThing</span><span class="pl-kos">.</span><span class="pl-en">bit</span><span class="pl-kos">(</span><span class="pl-s1">someStateThing</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
   <span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-k">void</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">void</span> <span class="pl-s1">eventBus</span><span class="pl-kos">.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s">"cleanup"</span><span class="pl-kos">,</span> <span class="pl-s1">otherThing</span><span class="pl-kos">.</span><span class="pl-en">bit</span><span class="pl-kos">(</span><span class="pl-s1">someStateThing</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">otherThing</span><span class="pl-kos">,</span> <span class="pl-s1">someStateThing</span><span class="pl-kos">]</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">But when I go to try and define that</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const useEffectWithEventBus: (cb: (eventbus: EventEmitter) =&gt; void | Destructor, deps: DependencyList) =&gt; void = (cb, deps) =&gt; {
   const { eventBus } = useContext(AppContext) 
   useEffect(() =&gt; cb(eventBus), [ eventBus, ...deps ])
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">useEffectWithEventBus</span>: <span class="pl-kos">(</span><span class="pl-s1">cb</span>: <span class="pl-kos">(</span><span class="pl-s1">eventbus</span>: <span class="pl-smi">EventEmitter</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-c1">|</span> <span class="pl-smi">Destructor</span><span class="pl-kos">,</span> <span class="pl-s1">deps</span>: <span class="pl-smi">DependencyList</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">cb</span><span class="pl-kos">,</span> <span class="pl-s1">deps</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
   <span class="pl-k">const</span> <span class="pl-kos">{</span> eventBus <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">useContext</span><span class="pl-kos">(</span><span class="pl-smi">AppContext</span><span class="pl-kos">)</span> 
   <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">cb</span><span class="pl-kos">(</span><span class="pl-s1">eventBus</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">[</span> <span class="pl-s1">eventBus</span><span class="pl-kos">,</span> ...<span class="pl-s1">deps</span> <span class="pl-kos">]</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><code class="notranslate">Cannot find name Destructor</code></p>
<p dir="auto">But EffectCallback IS <code class="notranslate">() =&gt; void | Destructor</code></p>
<p dir="auto">And destructor is <code class="notranslate">type Destructor = () =&gt; void | { [UNDEFINED_VOID_ONLY]: never };</code></p>
<p dir="auto">Its not inside the React Namespace - Destructor is mysteriously limited to the File scope of the react index? So I can't define my custom hook to have a function that can return a destructor... because I don't have access to the Destructor type.</p>
<p dir="auto">I thought, well, maybe I can just do functional composition on that... but... how do I define my callback out of the scope where eventBus is pulled from the context?  I might be able to get it in there functionally by using the .call(this) context...</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const useEffectWithEventBus: (cb: EffectCallback, deps: DependencyList) =&gt; void = (cb, deps) =&gt; {
   const { eventBus } = useContext(AppContext) 
   useEffect(() =&gt; cb.call(eventBus), [ eventBus, ...deps ])
}
useEffectWithEventBus(() =&gt; {
  if (!otherThing) return
   this?.emit(otherThing.bit(someStateThing))
   (): void =&gt; void this?.emit(&quot;cleanup&quot;, otherThing.bit(someStateThing))
}, [otherThing, someStateThing])"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">useEffectWithEventBus</span>: <span class="pl-kos">(</span><span class="pl-s1">cb</span>: <span class="pl-smi">EffectCallback</span><span class="pl-kos">,</span> <span class="pl-s1">deps</span>: <span class="pl-smi">DependencyList</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">cb</span><span class="pl-kos">,</span> <span class="pl-s1">deps</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
   <span class="pl-k">const</span> <span class="pl-kos">{</span> eventBus <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">useContext</span><span class="pl-kos">(</span><span class="pl-smi">AppContext</span><span class="pl-kos">)</span> 
   <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">cb</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-s1">eventBus</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">[</span> <span class="pl-s1">eventBus</span><span class="pl-kos">,</span> ...<span class="pl-s1">deps</span> <span class="pl-kos">]</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-en">useEffectWithEventBus</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">otherThing</span><span class="pl-kos">)</span> <span class="pl-k">return</span>
   <span class="pl-smi">this</span><span class="pl-kos">?.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s1">otherThing</span><span class="pl-kos">.</span><span class="pl-en">bit</span><span class="pl-kos">(</span><span class="pl-s1">someStateThing</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
   <span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-k">void</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">void</span> <span class="pl-smi">this</span><span class="pl-kos">?.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s">"cleanup"</span><span class="pl-kos">,</span> <span class="pl-s1">otherThing</span><span class="pl-kos">.</span><span class="pl-en">bit</span><span class="pl-kos">(</span><span class="pl-s1">someStateThing</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">otherThing</span><span class="pl-kos">,</span> <span class="pl-s1">someStateThing</span><span class="pl-kos">]</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">But then the compiler thinks that this might be undefined (true) and it has no idea that this refers to an <code class="notranslate">EventEmitter</code> - and it eludes me how(or even if is possible) to type narrow <code class="notranslate">this</code> to an <code class="notranslate">EventEmitter</code>.  (that's pretty advanced typing don't you think?)</p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">Destructor type not exported enough to use in my code</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Destructor type is exported enough to use in my code</p>
<p dir="auto">Describe what you were doing when the bug occurred:<br>
1.<br>
2.<br>
3.</p>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.11.0-39713716aa</p>
<p dir="auto">Call stack: at store_Store.getElementAtIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22171:35)<br>
at store_Store.getElementIDAtIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22187:26)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29770:63<br>
at List.render (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23893:18)<br>
at Ii (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:14002:76)<br>
at Hi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13993:10)<br>
at uk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16728:86)<br>
at tk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16245:11)<br>
at qk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16237:23)<br>
at jk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16221:5)</p>
<p dir="auto">Component stack: at List (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23588:30)<br>
at div<br>
at AutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:3111:5)<br>
at div<br>
at div<br>
at Tree_Tree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29531:47)<br>
at div<br>
at div<br>
at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28680:3)<br>
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29121:3)<br>
at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34645:52)<br>
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30035:5)<br>
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30157:5)<br>
at div<br>
at div<br>
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34264:3)<br>
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25356:3)<br>
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25963:3)<br>
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30300:3)<br>
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37639:3)</p>