Type error for UISchema object

[dcantu96]

Describe the bug

Im trying to type my uischema object using the specified type in the uischema prop UISchemaElement

Expected behavior

I expect the object to be typed with the appropriate values and specs of the UI schema object

Steps to reproduce the issue

I think the object type is incorrectly typed. and warns me with the error in the screenshot.

Here is a conde sandbox with the error

Screenshots

In which browser are you experiencing the issue?

No browser. this is a type error

Which Version of JSON Forms are you using?

v3.0.0

Framework

React

RendererSet

No response

Additional context

No response

[sdirix]

Thanks for the report!

Yes, our types are not set up in a convenient way so that Typescript is not able to automatically determine that your uischema is a valid UISchemaElement.

In this case the uischema needs to be typed as VerticalLayout and the child element as ControlElement, then the type errors will be gone.

[dcantu96]

Thank you. I did what you said and the errors for the first elements attribute are gone however, there are still some errors in the children elements of the uiSchema. I just copied the uiSchema example in your home page https://jsonforms.io/

So to remove all type errors I had to do this like you said I added the controlElement but I also had to add the HorizontalLayout type

[dcantu96]

I will just type it as any for now, just letting you know. Thanks for this library it's awesome ❤️

[sdirix]

Sadly each element needs to be typed for Typescript to recognize that they are compatible, e.g.

const uischema: VerticalLayout = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      scope: '#/properties/firstName'
    } as ControlElement,
  ],
};

To avoid the forced cast a separate variable is needed, e.g.

const firstNameControl: ControlElemenet = {
  type: 'Control',
  scope: '#/properties/firstName'
}
const uischema: VerticalLayout = {
  type: 'VerticalLayout',
  elements: [ firstNameControl ],
};

Note that this behavior is not intended, we just set up the types in an unfortunate way. It's definitely on our list of things to improve.

[neelav]

Is there any update on when this would be fixed?

[sdirix]

As you can see with the milestone planning we eventually want to tackle this but there is no specific date which I could announce. Of course, if you, or someone else, would like to contribute, then this could be brought in much earlier.

[MartinDavi]

Hey as someone evaluating JsonForms for a large complex project I will say that hitting typescript issues immediately is a pretty much a non-starter at this point.

Understanding of course this is open source, free, etc! The project looks very nice but if the types aren't correct internally, that's gonna be a deal breaker for many I imagine.

[sdirix]

The types are complete, however they are in a state which is not that convenient to use. They are set up in hierarchical fashion, i.e. VerticalLayout extends UiSchemaElement. Therefore if you have a proper VerticalLayout typed element in hand, then it will be accepted by all functions accepting a UiSchemaElement. However if it's just an implicit type, then Typescript fails to realize that it's valid. Therefore you need to manually assert the children types.

Obviously we would like to see this improved, with a more natural type checking.

In practice this rarely plays a role as UI Schemas are typically loaded from a service, potentially type checked and then handed in, which works fine with the current approach. It's when defining them programmatically without assigning them a type yourself, or via direct json imports, where this problem typically occurs.

[MartinDavi]

Gotchya - yes my surprise is that uischema prop is not typed more explicitly and instead is relying on typescript allowing extra properties not defined in the interface to be passed in.

Anyway, all good - I'll keep trucking along. Thanks for the response!