@types/react - Invalid definition of children

[michalbundyra]

Is something wrong with CI or publishing infrastructure?

• Check the Infrastructure status updates thread for known issues.
• Leave a message on the DefinitelyTyped Gitter.

If you know how to fix the issue, make a pull request instead.

• I tried using the @types/react package and had problems.
• I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• I understand that @types package versions do not follow SemVer.
• I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• Mention the authors (see Definitions by: in index.d.ts) so they can respond.
  • Authors: @eps1lon, @johnnyreilly, @bbenezech, @disjukr

The original issue report is here: mui/material-ui#23792

I've been told there that the issue is not with TypeScript nor Material-UI but the problem is in @types/react that's why I am creating that issue. To be completely honest I did not even suspect that and I have no idea how to fix it. I just know that my code does not work when I try latest stable TypeScript (4.1.2).

Errors I am getting are as follows:

Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | ReactElement<...>[]' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.
  Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>[]' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>': type, props, key(2322)

[eps1lon]

The part that @types/react is not correctly implementing:

React.Children.map could narrow the item a bit but that's an issue for @types/react

In React.Children.map(children, mappingFunction) mappingFunction is only invoked with null | ReactElement | number | string. React.Children.map flattens arrays.

Runtime semantics: https://codesandbox.io/s/reactchildrenmap-semantics-jv0pz
Expected types behavior: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQduEAdqvLgBbAA2AJpczgBeOAG0Ars15YCwZll4AaOM3Hduygsm6osymFHF6xAXWWiAjGbgAeXsABucAPQA+E-TrY8MAHQBhLj4BXxBkMAAKTh5+LGZlKKDeAC4VNW44AB80kAAjLCgszCo-b3wAUW4sEDiYAEphVzgAbwBfOqA

[michalbundyra]

@eps1lon thanks for your response. Is there any way we can easily fix it? Thanks

[eps1lon]

We would need to update the typings.

[michalbundyra]

@eps1lon not sure if I understand... so the problem is not on @types/react but in my code?
I am not sure what I should change, as it was working on TypeScript < 4.1... Thanks

[eps1lon]

@eps1lon not sure if I understand... so the problem is not on @types/react but in my code?

The problem is in @types/react. I was referring to the typings of @types/react which need to be updated.

[michalbundyra]

I've tried several different combinations on:

DefinitelyTyped/types/react/index.d.ts

Lines 2881 to 2882 in 3412ebe

	map<T, C>(children: C | C[], fn: (child: C, index: number) => T):
	C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;

but honestly I have no idea how to fix it in the correct way... 😕

[orta]

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.