<p dir="auto">When I try to use children of a component with forwardRef has the next error:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="TS2322: Type '{ children: ReactNode; error: boolean; full: boolean; secondary: boolean; type: &quot;submit&quot; | &quot;reset&quot; | &quot;button&quot;; white: boolean; }' is not assignable to type 'IntrinsicAttributes &amp; BaseButtonInnerProps &amp; RefAttributes&lt;HTMLButtonElement&gt;'.   Property 'children' does not exist on type 'IntrinsicAttributes &amp; BaseButtonInnerProps &amp; RefAttributes&lt;HTMLButtonElement&gt;'."><pre class="notranslate">TS2322: <span class="pl-smi">Type</span> '<span class="pl-kos">{</span> children: <span class="pl-smi">ReactNode</span><span class="pl-kos">;</span> error: <span class="pl-s1">boolean</span><span class="pl-kos">;</span> full: <span class="pl-s1">boolean</span><span class="pl-kos">;</span> secondary: <span class="pl-s1">boolean</span><span class="pl-kos">;</span> type: <span class="pl-s">"submit"</span> <span class="pl-c1">|</span> <span class="pl-s">"reset"</span> <span class="pl-c1">|</span> <span class="pl-s">"button"</span><span class="pl-kos">;</span> white: <span class="pl-s1">boolean</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-s">' is not assignable to type '</span><span class="pl-kos"></span><span class="pl-smi">IntrinsicAttributes</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">BaseButtonInnerProps</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">RefAttributes</span><span class="pl-c1">&lt;</span><span class="pl-smi">HTMLButtonElement</span><span class="pl-c1">&gt;</span><span class="pl-s">'.   Property '</span><span class="pl-s1">children</span><span class="pl-s">' does not exist on type '</span><span class="pl-smi">IntrinsicAttributes</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">BaseButtonInnerProps</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">RefAttributes</span><span class="pl-c1">&lt;</span><span class="pl-smi">HTMLButtonElement</span><span class="pl-c1">&gt;</span>'.</pre></div>
<p dir="auto">The error is in the types:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface ForwardRefRenderFunction&lt;T, P = {}&gt; {
        (props: PropsWithChildren&lt;P&gt;, ref: ((instance: T | null) =&gt; void) | MutableRefObject&lt;T | null&gt; | null): ReactElement | null;
        displayName?: string;
        // explicit rejected with `never` required due to
        // https://github.com/microsoft/TypeScript/issues/36826
        /**
         * defaultProps are not supported on render functions
         */
        defaultProps?: never;
        /**
         * propTypes are not supported on render functions
         */
        propTypes?: never;
}

function forwardRef&lt;T, P = {}&gt;(render: ForwardRefRenderFunction&lt;T, P&gt;): ForwardRefExoticComponent&lt;PropsWithoutRef&lt;P&gt; &amp; RefAttributes&lt;T&gt;&gt;;"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">ForwardRefRenderFunction</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">P</span> <span class="pl-c1">=</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-kos">(</span><span class="pl-s1">props</span>: <span class="pl-smi">PropsWithChildren</span><span class="pl-kos">&lt;</span><span class="pl-smi">P</span><span class="pl-kos">&gt;</span><span class="pl-kos">,</span> <span class="pl-s1">ref</span>: <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">instance</span>: <span class="pl-smi">T</span> <span class="pl-c1">|</span> <span class="pl-c1">null</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-c1">|</span> <span class="pl-smi">MutableRefObject</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span><span class="pl-kos">&gt;</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span><span class="pl-kos">)</span>: <span class="pl-smi">ReactElement</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
        <span class="pl-c1">displayName</span>?: <span class="pl-smi">string</span><span class="pl-kos">;</span>
        <span class="pl-c">// explicit rejected with `never` required due to</span>
        <span class="pl-c">// https://github.com/microsoft/TypeScript/issues/36826</span>
        <span class="pl-c">/**</span>
<span class="pl-c">         * defaultProps are not supported on render functions</span>
<span class="pl-c">         */</span>
        <span class="pl-c1">defaultProps</span>?: <span class="pl-smi">never</span><span class="pl-kos">;</span>
        <span class="pl-c">/**</span>
<span class="pl-c">         * propTypes are not supported on render functions</span>
<span class="pl-c">         */</span>
        <span class="pl-c1">propTypes</span>?: <span class="pl-smi">never</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-s1">forwardRef</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">P</span> <span class="pl-c1">=</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-s1">render</span>: <span class="pl-smi">ForwardRefRenderFunction</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-smi">P</span><span class="pl-kos">&gt;</span><span class="pl-kos">)</span>: <span class="pl-smi">ForwardRefExoticComponent</span><span class="pl-kos">&lt;</span><span class="pl-smi">PropsWithoutRef</span><span class="pl-kos">&lt;</span><span class="pl-smi">P</span><span class="pl-kos">&gt;</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">RefAttributes</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">That return a type of a component without children, but is you add the children in your props with <code class="notranslate">PropsWithChildren</code> , exists another problem.</p>
<p dir="auto">The <code class="notranslate">ForwardRefRenderFunction</code> has a duplicate <code class="notranslate">PropsWithChildren</code></p>
<p dir="auto"><strong>Solution:</strong></p>
<p dir="auto">Exists 2 ways to solve this:</p>
<ol dir="auto">
<li>Wrap <code class="notranslate">PropsWithChildren</code> to <code class="notranslate">PropsWithoutRef&lt;P&gt;</code></li>
<li>Remove <code class="notranslate">PropsWithChildren</code> of <code class="notranslate">ForwardRefRenderFunction</code> (the user need declare manually the <code class="notranslate">PropsWithChildren</code> in their components)</li>
</ol>
<p dir="auto">Autors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/johnnyreilly/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/johnnyreilly">@johnnyreilly</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bbenezech/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bbenezech">@bbenezech</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pzavolinsky/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pzavolinsky">@pzavolinsky</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/digiguru/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/digiguru">@digiguru</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ericanderson/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ericanderson">@ericanderson</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/DovydasNavickas/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/DovydasNavickas">@DovydasNavickas</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/theruther4d/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/theruther4d">@theruther4d</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/guilhermehubner/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/guilhermehubner">@guilhermehubner</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ferdaber/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ferdaber">@ferdaber</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jrakotoharisoa/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jrakotoharisoa">@jrakotoharisoa</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pascaloliv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pascaloliv">@pascaloliv</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Hotell/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Hotell">@Hotell</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/franklixuefei/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/franklixuefei">@franklixuefei</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Jessidhia/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Jessidhia">@Jessidhia</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/saranshkataria/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/saranshkataria">@saranshkataria</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/lukyth/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/lukyth">@lukyth</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/eps1lon">@eps1lon</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/zieka/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/zieka">@zieka</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dancerphil/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/dancerphil">@dancerphil</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dimitropoulos/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/dimitropoulos">@dimitropoulos</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/disjukr/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/disjukr">@disjukr</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vhfmag/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vhfmag">@vhfmag</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hellatan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/hellatan">@hellatan</a></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/arcgis-js-api</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" 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="organization" data-hovercard-url="/orgs/Esri/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Esri">@Esri</a></li>
</ul>
</li>
</ul>
<p dir="auto">This is in relation to the <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/arcgis-js-api/v3">arcgis-js-api v3</a> definitions.</p>
<h2 dir="auto">Overview</h2>
<p dir="auto">I have created namespace-style type definitions for v3 of the arcgis-js-api for people who don't use AMD for their whole project. The definitions can be found here: <a href="https://github.com/TwitchBronBron/esri-javascript-api-typings">https://github.com/TwitchBronBron/esri-javascript-api-typings</a>. Where in DefinitelyTyped should I put them, and what should I name them since they are just in a different format from the original?</p>
<h2 dir="auto">Details</h2>
<p dir="auto">The arcgis-js-api definitions are written assuming that all users will be using the AMD module format. However, we do not write our projects in AMD. Instead, we use standard typescript namespaces, and sprinkle in AMD whenever we need to use the arcgis-js-api pieces. Here's an example:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="namespace app {
    class MapManager {

        private map: any;

        createMap(): Promise&lt;any&gt; {
            return new Promise((resolve) =&gt; {
                require(['esri/map'], function (Map) {
                    this.map = new Map('map-id');
                    resolve(this.map);
                });
            });
        }
    }
}  "><pre class="notranslate"><span class="pl-k">namespace</span> <span class="pl-s1">app</span> <span class="pl-kos">{</span>
    <span class="pl-k">class</span> <span class="pl-smi">MapManager</span> <span class="pl-kos">{</span>

        <span class="pl-k">private</span> <span class="pl-c1">map</span>: <span class="pl-smi">any</span><span class="pl-kos">;</span>

        <span class="pl-en">createMap</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">Promise</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-smi">Promise</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">resolve</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'esri/map'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-smi">Map</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">map</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Map</span><span class="pl-kos">(</span><span class="pl-s">'map-id'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                    <span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">map</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-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-kos">}</span>  </pre></div>
<p dir="auto">This prevents us from using the arcgis-js-api TypeScript definitions found in DefinitelyTyped because we are not all-in with AMD.</p>
<p dir="auto">For everyone who uses the ESRI JavaScript API in this way, it would be valuable to have the types in a standard namespace-style format. We would need to manually assign all of those types to our objects, but there is still a TON of value in having type information about these once they are wired up. Here is how we would consume those definitions:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// &lt;reference path=&quot;path/to/arcgis-js-api-namespaced.d.ts&quot; /&gt;
namespace app {
    class MapManager {
       
         //Now every consumer of MapManager#map will get type information about the esri map
        public map: esri.Map;

        createMap(): Promise&lt;esri.Map&gt; {
            return new Promise((resolve) =&gt; {
                require(['esri/map'], function (Map) {
                    this.map = new Map('map-id');
                    resolve(this.map);
                });
            });
        }
    }
}"><pre class="notranslate"><span class="pl-c">/// &lt;reference path="path/to/arcgis-js-api-namespaced.d.ts" /&gt;</span>
<span class="pl-k">namespace</span> <span class="pl-s1">app</span> <span class="pl-kos">{</span>
    <span class="pl-k">class</span> <span class="pl-smi">MapManager</span> <span class="pl-kos">{</span>
       
         <span class="pl-c">//Now every consumer of MapManager#map will get type information about the esri map</span>
        <span class="pl-k">public</span> <span class="pl-c1">map</span>: <span class="pl-s1">esri</span><span class="pl-kos">.</span><span class="pl-smi">Map</span><span class="pl-kos">;</span>

        <span class="pl-en">createMap</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">Promise</span><span class="pl-kos">&lt;</span><span class="pl-s1">esri</span><span class="pl-kos">.</span><span class="pl-smi">Map</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-smi">Promise</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">resolve</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'esri/map'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-smi">Map</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">map</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Map</span><span class="pl-kos">(</span><span class="pl-s">'map-id'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                    <span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">map</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-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-kos">}</span></pre></div>
<p dir="auto">I have already created the namespace-style versions of the arcgis-js-api type definitions. You can find them here: <a href="https://github.com/TwitchBronBron/esri-javascript-api-typings">https://github.com/TwitchBronBron/esri-javascript-api-typings</a>. I think these belong in DefinitelyTyped, but <strong>where in DefinitelyTyped should I put them</strong>, and <strong>what should I name it</strong> since there is already a project with arcgis-js-api in this repository?</p>
<p dir="auto">Thanks!</p>