<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/superagent@3.5.5</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/NicoZelaya/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/NicoZelaya">@NicoZelaya</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mxl/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mxl">@mxl</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/paplorinc/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/paplorinc">@paplorinc</a></li>
</ul>
</li>
</ul>
<p dir="auto">I'm using <code class="notranslate">superagent</code> in the browser environment (not Node). Importing <code class="notranslate">superagent</code> loads type definitions <code class="notranslate">@types/superagent</code> which unconditionally imports <code class="notranslate">@types/node</code> which injects global type definitions for Node environment. After that, the TypeScript compiler tells me that <code class="notranslate">setTimeout</code> returns <code class="notranslate">NodeJS.Timer</code> while I expect it to return <code class="notranslate">number</code> because there should be no <code class="notranslate">NodeJS</code> in the browser.</p>
<p dir="auto">I'm not using the latest <code class="notranslate">tsc</code> because I'm building a React+TypeScript app via <a href="https://github.com/zhenwenc/create-react-app">https://github.com/zhenwenc/create-react-app</a> <a href="https://www.npmjs.com/package/zc-react-scripts" rel="nofollow">https://www.npmjs.com/package/zc-react-scripts</a> –<br>
<code class="notranslate">typescript@2.4.2</code> <a href="https://github.com/zhenwenc/create-react-app/blob/ad3d5ee66a9e7e7b0326ff4e79cc9ce08d76423f/packages/react-scripts/package.json#L65">is bundled</a> with the latest version <code class="notranslate">zc-react-scripts@1.1.1</code> at the time of writing.</p>
<p dir="auto">If you know how to fix the issue, make a pull request instead.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/xxxx</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/GlenCFL/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/GlenCFL">@GlenCFL</a></li>
</ul>
</li>
</ul>
<p dir="auto">Since different emitters can have different 'emissions', having a global interface, especially one defining 'catch-all' string index is not helpful <em>at all</em>. Adding <code class="notranslate">Emissions</code> as a generic parameter to <code class="notranslate">Emitter</code> itself would work <em>much</em> better. Example:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/**
 *  Utility class to be used when implementing event-based APIs that allows
 *  for handlers registered via ::on to be invoked with calls to ::emit.
 */
export class Emitter&lt;Emissions = { [key: string]: any }&gt; implements DisposableLike {
    /** Construct an emitter. */
    constructor();

    /** Clear out any existing subscribers. */
    clear(): void;

    /** Unsubscribe all handlers. */
    dispose(): boolean;

    // Event Subscription
    /** Registers a handler to be invoked whenever the given event is emitted. */
    on&lt;T extends keyof Emissions&gt;(eventName: T, handler: (value?: Emissions[T]) =&gt; void):
        Disposable;

    /**
     *  Register the given handler function to be invoked the next time an event
     *  with the given name is emitted via ::emit.
     */
    once&lt;T extends keyof Emissions&gt;(eventName: T, handler: (value?: Emissions[T]) =&gt; void):
        Disposable;

    /**
     *  Register the given handler function to be invoked before all other
     *  handlers existing at the time of subscription whenever events by the
     *  given name are emitted via ::emit.
     */
    preempt&lt;T extends keyof Emissions&gt;(eventName: T, handler: (value?: Emissions[T]) =&gt; void):
        Disposable;

    // Event Emission
    /** Invoke the handlers registered via ::on for the given event name. */
    emit&lt;T extends keyof Emissions&gt;(eventName: T, value?: Emissions[T]): void;
}"><pre class="notranslate"><span class="pl-c">/**</span>
<span class="pl-c"> *  Utility class to be used when implementing event-based APIs that allows</span>
<span class="pl-c"> *  for handlers registered via ::on to be invoked with calls to ::emit.</span>
<span class="pl-c"> */</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">Emitter</span><span class="pl-c1">&lt;</span><span class="pl-smi">Emissions</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-kos">[</span><span class="pl-s1">key</span>: <span class="pl-smi">string</span><span class="pl-kos">]</span>: <span class="pl-smi">any</span> <span class="pl-kos">}</span><span class="pl-c1">&gt;</span> <span class="pl-k">implements</span> <span class="pl-smi">DisposableLike</span> <span class="pl-kos">{</span>
    <span class="pl-c">/** Construct an emitter. */</span>
    <span class="pl-c1">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-c">/** Clear out any existing subscribers. */</span>
    <span class="pl-c1">clear</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-kos">;</span>

    <span class="pl-c">/** Unsubscribe all handlers. */</span>
    <span class="pl-c1">dispose</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>

    <span class="pl-c">// Event Subscription</span>
    <span class="pl-c">/** Registers a handler to be invoked whenever the given event is emitted. */</span>
    <span class="pl-c1">on</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-k">keyof</span> <span class="pl-smi">Emissions</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">eventName</span>: <span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-s1">handler</span>: <span class="pl-kos">(</span><span class="pl-s1">value</span>?: <span class="pl-smi">Emissions</span><span class="pl-kos">[</span><span class="pl-smi">T</span><span class="pl-kos">]</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-kos">)</span>:
        <span class="pl-smi">Disposable</span><span class="pl-kos">;</span>

    <span class="pl-c">/**</span>
<span class="pl-c">     *  Register the given handler function to be invoked the next time an event</span>
<span class="pl-c">     *  with the given name is emitted via ::emit.</span>
<span class="pl-c">     */</span>
    <span class="pl-c1">once</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-k">keyof</span> <span class="pl-smi">Emissions</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">eventName</span>: <span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-s1">handler</span>: <span class="pl-kos">(</span><span class="pl-s1">value</span>?: <span class="pl-smi">Emissions</span><span class="pl-kos">[</span><span class="pl-smi">T</span><span class="pl-kos">]</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-kos">)</span>:
        <span class="pl-smi">Disposable</span><span class="pl-kos">;</span>

    <span class="pl-c">/**</span>
<span class="pl-c">     *  Register the given handler function to be invoked before all other</span>
<span class="pl-c">     *  handlers existing at the time of subscription whenever events by the</span>
<span class="pl-c">     *  given name are emitted via ::emit.</span>
<span class="pl-c">     */</span>
    <span class="pl-c1">preempt</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-k">keyof</span> <span class="pl-smi">Emissions</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">eventName</span>: <span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-s1">handler</span>: <span class="pl-kos">(</span><span class="pl-s1">value</span>?: <span class="pl-smi">Emissions</span><span class="pl-kos">[</span><span class="pl-smi">T</span><span class="pl-kos">]</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-kos">)</span>:
        <span class="pl-smi">Disposable</span><span class="pl-kos">;</span>

    <span class="pl-c">// Event Emission</span>
    <span class="pl-c">/** Invoke the handlers registered via ::on for the given event name. */</span>
    <span class="pl-c1">emit</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-k">keyof</span> <span class="pl-smi">Emissions</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">eventName</span>: <span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-s1">value</span>?: <span class="pl-smi">Emissions</span><span class="pl-kos">[</span><span class="pl-smi">T</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-kos">;</span>
<span class="pl-kos">}</span></pre></div>