Skip to content

Error on type checking JSX children #15583

Description

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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