How to define Component shape using typescript?

[farooqkz]

I am defining a component whose shape must be something predefined. How can I use typescript to enforce this?

function Component({ children: any }) {
  return (
    <div>
     {children}
   </div>
  );
}

For example sometimes I want children to be a single VNode only and nothing else.

[Havunen]

This is related to issue: #1619

[farooqkz]

@Havunen So from my understanding for now we must do any and check type ourselves?

[farooqkz]

ping @Havunen

[Havunen]

Hmm, I was playing with this today and it seems there are some issues with the component children typings. I will investigate

[Havunen]

Hi @farooqkz

There is now two new types InfernoNode and InfernoSingleNode in inferno 8.1.0
InfernoSingleNode can be used to type the children property with "any" possible non-array value:

If you are using class components you need to help typescript little bit by defining the prop same as set to the generic type of Component in lifecycle methods for example render. Note that when using InfernoSingleNode then the shape of the children is not known, its only guaranteed not be an array. See the screenshot.

The typed children support has also been improved in v8.1.0.
If you have a Component hierarchy where you know the shape of children and want to restrict the children to specific type(s) that is also possible now. But JSX does not yet restrict out different types. I will check if I can improve this for 8.1.1

You can mark the children prop optional if you want to allow leaving children empty.
Please check inferno tests for more details.

[Havunen]

I created a new ticket #1635