Typescript: JSX Stateless Functional Components Property 'children' is missing in type.

[bennoleslie]

TypeScript Version:

1.8.9 / (1.9.0-dev.20160409)

Code

/// <reference path="react.d.ts"/>

import * as React from 'react';

const Test = ({children}) => <span>{children}</span>;

<Test>123</Test>;

Expected behavior:

No errors.

Actual behavior:

test.tsx(7,1): error TS2324: Property 'children' is missing in type 'IntrinsicAttributes & { children: any; }'.

If I change the JSX to:

React.createElement(Test, null, "123");

there is no error reported.

[DanielRosenwasser]

Duplicate of #6471?

[bennoleslie]

I'm not 100% sure if it is the same or not. I can reproduce the same behaviour with a fully expanded component definition

class Test extends React.Component<{children: any}, {}>{
  render() {
     return <span>{this.props.children}</span>
  }
}

<Test>123</Test>;

Will, fail with the same error. And the work-around of changing the type definition to:

{children?: any}

works, but is pretty undesirable.

The workaround I have for stateless components is that I can write it:

const Test = (props: {children?:any}) => <span>{props.children}</span>;

which again isn't ideal.

Another work-around is

const Test = ({children=null}) => <span>{children}</span>;

or, more explicitly,

const Test = ({children} : {children?: any}) => <span>{children}</span>;

This is probably the best that can be had without special case code for handling children.

[DanielRosenwasser]

@bennoleslie I realize that it isn't a duplicate. I think you just want to make children optional, which you could get if you just wrote:

const Test = ({ children = undefined }) => <span>{children}</span>

[opvasger]

I realize this might be a non-issue, but I can't seem to find any good example anywhere of how to use stateless components with children - I'm assuming it's possible somehow?

main.tsx

const Wrapper = ({ children }: { children: any | undefined }) =>
    <div>{children}</div>

const Outer = () =>
    <Wrapper>
        <div>Hi</div>
        <div>There</div>
    </Wrapper>

at compile-time, this error is emitted in the console:

source/main.tsx(39,13): error TS2324: Property 'children' is missing in type 'IntrinsicAttributes & { children: any; }'.

I'm trying to compile with

• Typescript 2.1.5
• React 15.4.2
• @types/React 15.0.4

[fakiolinho]

@opvasger what about sth like this:

const Wrapper: React.StatelessComponent<{ children?: React.ReactNode}> = ({ children }) =>
    <div>{children}</div>

[opvasger]

@fakiolinho hehe, yea - I've done it like this since:

    const Wrapper: React.StatelessComponent<{}> = ({ children }) => <div>{children}</div>

I didn't realize it at the time, but children are implicitly passed, which I guess makes sense 😄

[mhegazy]

Should be addressed by https://github.com/Microsoft/TypeScript/issues/13618