Skip to content

Error on type checking JSX children #15583

Closed
@firewave-remo

Description

@firewave-remo

TypeScript Version: 2.3.2
I am struggeling with the new JSX children checking feature. I have already asked on Stackoverflow - TypeScript type checking JSX children but no answers so far, thats why i am asking here.

I cannot get the following code to work, but i think this should work according to the new feature.
Code

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface TestProps {
    children: string | JSX.Element;
}

const Foo = (props: TestProps) => <div>{props.children}</div>;

// Error on Foo
ReactDOM.render(
    <Foo>
        <div>Test</div>
    </Foo>,
    document.getElementById('content'),
);

Expected behavior:
No Errors

Actual behavior:
I get the following error on compilation:

TestTsxChildren> tsc --version
Version 2.3.2
TestTsxChildren> tsc
main.tsx(11,5): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & TestProps'.
  Type '{}' is not assignable to type 'TestProps'.
    Property 'children' is missing in type '{}'.

I hope you can tell me, what i am dooing wrong or maybe i missunderstood the new feature.

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugA bug in TypeScriptDomain: JSX/TSXRelates to the JSX parser and emitter

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions