<p dir="auto">I have this simple code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import * as React from &quot;react&quot;;
import * as ReactDOM from &quot;react-dom&quot;;

ReactDOM.render(&lt;div&gt;Hi&lt;/div&gt;, document.getElementById(&quot;root&quot;));"><pre class="notranslate"><code class="notranslate">import * as React from "react";
import * as ReactDOM from "react-dom";

ReactDOM.render(&lt;div&gt;Hi&lt;/div&gt;, document.getElementById("root"));
</code></pre></div>
<p dir="auto">that is giving me this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Argument of type 'Element' is not assignable to parameter of type 'ReactElement&lt;any&gt;[]'.
  Property 'length' is missing in type 'Element'."><pre class="notranslate"><code class="notranslate">Argument of type 'Element' is not assignable to parameter of type 'ReactElement&lt;any&gt;[]'.
  Property 'length' is missing in type 'Element'.
</code></pre></div>
<p dir="auto">I've currently tried these versions of react and react-dom:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;react&quot;: &quot;16.4.2&quot;,
&quot;react-dom&quot;: &quot;16.4.2&quot;,
&quot;@types/react&quot;: &quot;16.4.7&quot;,
&quot;@types/react-dom&quot;: &quot;16.0.6&quot;,"><pre class="notranslate"><code class="notranslate">"react": "16.4.2",
"react-dom": "16.4.2",
"@types/react": "16.4.7",
"@types/react-dom": "16.0.6",
</code></pre></div>
<p dir="auto">and</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;react&quot;: &quot;16.4.0&quot;,
&quot;react-dom&quot;: &quot;16.4.0&quot;,
&quot;@types/react&quot;: &quot;16.3.17&quot;,
&quot;@types/react-dom&quot;: &quot;16.0.6&quot;,"><pre class="notranslate"><code class="notranslate">"react": "16.4.0",
"react-dom": "16.4.0",
"@types/react": "16.3.17",
"@types/react-dom": "16.0.6",
</code></pre></div>
<p dir="auto">I'd like to have react 16, but I'm not sure what the typing issue is here.</p>
<p dir="auto">Below are examples of mistakes I make all the time. For that reason, I would really like for these to be type errors, so I can catch these mistakes earlier.</p>
<p dir="auto">IIUC, the reason these are not type errors is because the <code class="notranslate">children</code>/<code class="notranslate">ReactNode</code> type includes <code class="notranslate">{}</code>, which allows almost anything through. That begs the question, can we remove <code class="notranslate">{}</code>, or is there a valid reason to keep it?</p>
<h4 dir="auto">Passing a function as a React child (forgot to call the function)</h4>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import { FC } from 'react';

const renderChildren = () =&gt; 'foo'

declare const MyComponent: FC&lt;{}&gt;;
// Oops! We forgot to call this function. But we got no type error :-(
&lt;MyComponent&gt;{renderChildren}&lt;/MyComponent&gt;;

// Should be:
// &lt;MyComponent&gt;{renderChildren()}&lt;/MyComponent&gt;;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">FC</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-en">renderChildren</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-s">'foo'</span>

<span class="pl-k">declare</span> <span class="pl-k">const</span> <span class="pl-smi">MyComponent</span>: <span class="pl-smi">FC</span><span class="pl-kos">&lt;</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-c">// Oops! We forgot to call this function. But we got no type error :-(</span>
<span class="pl-c1">&lt;</span><span class="pl-smi">MyComponent</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">renderChildren</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">MyComponent</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>

<span class="pl-c">// Should be:</span>
<span class="pl-c">// &lt;MyComponent&gt;{renderChildren()}&lt;/MyComponent&gt;;</span></pre></div>
<h4 dir="auto">Passing an <code class="notranslate">Option</code> as a React child (forgot to serialize/decode)</h4>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import { FC } from 'react';

type Option&lt;T&gt; = { value: T, orNull: () =&gt; T | null }
declare const myOption: Option&lt;string&gt;

declare const MyComponent: FC&lt;{}&gt;;
// Oops! We forgot to serialize/decode this `Option`. But we got no type error :-(
&lt;MyComponent&gt;{myOption}&lt;/MyComponent&gt;;

// Should be:
// &lt;MyComponent&gt;{myOption.orNull()}&lt;/MyComponent&gt;;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">FC</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">Option</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-c1">orNull</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</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-k">declare</span> <span class="pl-k">const</span> <span class="pl-s1">myOption</span>: <span class="pl-smi">Option</span><span class="pl-kos">&lt;</span><span class="pl-smi">string</span><span class="pl-kos">&gt;</span>

<span class="pl-k">declare</span> <span class="pl-k">const</span> <span class="pl-smi">MyComponent</span>: <span class="pl-smi">FC</span><span class="pl-kos">&lt;</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-c">// Oops! We forgot to serialize/decode this `Option`. But we got no type error :-(</span>
<span class="pl-c1">&lt;</span><span class="pl-smi">MyComponent</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">myOption</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">MyComponent</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>

<span class="pl-c">// Should be:</span>
<span class="pl-c">// &lt;MyComponent&gt;{myOption.orNull()}&lt;/MyComponent&gt;;</span></pre></div>
<hr>
<p dir="auto">One workaround I know of is to explicitly define the <code class="notranslate">children</code> prop:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import { FC } from 'react';

const renderChildren = () =&gt; 'foo'

declare const MyComponent: FC&lt;{ children: string }&gt;;
// Oops! We forgot to call this function. We got a type error :-)
&lt;MyComponent&gt;{renderChildren}&lt;/MyComponent&gt;;

// Should be:
&lt;MyComponent&gt;{renderChildren()}&lt;/MyComponent&gt;;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">FC</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-en">renderChildren</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-s">'foo'</span>

<span class="pl-k">declare</span> <span class="pl-k">const</span> <span class="pl-smi">MyComponent</span>: <span class="pl-smi">FC</span><span class="pl-kos">&lt;</span><span class="pl-kos">{</span> <span class="pl-c1">children</span>: <span class="pl-smi">string</span> <span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-c">// Oops! We forgot to call this function. We got a type error :-)</span>
<span class="pl-c1">&lt;</span><span class="pl-smi">MyComponent</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">renderChildren</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">MyComponent</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>

<span class="pl-c">// Should be:</span>
<span class="pl-c1">&lt;</span><span class="pl-smi">MyComponent</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-en">renderChildren</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">MyComponent</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">However I hoped this wouldn't be necessary. That also doesn't help when passing children to a DOM component:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Oops! We forgot to call this function. But we got no type error :-(
&lt;div&gt;{renderChildren}&lt;/div&gt;;"><pre class="notranslate"><span class="pl-c">// Oops! We forgot to call this function. But we got no type error :-(</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">renderChildren</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<hr>
<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" 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/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/tkrotoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tkrotoff">@tkrotoff</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/onigoetz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/onigoetz">@onigoetz</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></li>
</ul>
</li>
</ul>
<p dir="auto">If you do not mention the authors the issue will be ignored.</p>