Typescript: how to set type of children in React Component?

Question

Can i set type of children in TypeScript?

For example i have such Components

class UserProfile extends React.Component<{ id: number }, void>{
}

class Thumbnail extends React.Component<{ children: UserProfile[] }, void>{

}

class UsersList extends React.Component<void, void>{

    public render() {
        return (
            <div>
                <Thumbnail><UserProfile id={1} /></Thumbnail>
                <Thumbnail><UserProfile id={2} /></Thumbnail>
            </div>
        )
    }
}

I want to define what particular children are supported in Thumbnail component in order to avoid such situation:

class UsersList extends React.Component<void, void>{

    public render() {
        return (
            <div>
                <Thumbnail><UserProfile id={1} /></Thumbnail>
                <Thumbnail><UserProfile id={2} /></Thumbnail>
                <Thumbnail><span>Some plain text</span></Thumbnail> // This should be forbidden because Thumbnail component expects to have an array of UserProfile elements as it can handle them
            </div>
        )
    }
}

This example doesn't work, but is there any way to do it?

Answer 1

set type of children in React Component?

Can't be narrowed with a type annotation (its all JSX.Element). Can be done with runtime introspection ( type property of each child).