Typescript and UI5 React

[kbachl]

So,

i try to use as much Typescript as possible to avoid runtime errors, but UI5 react gives me one headache after another, e.g:

Popover, as from your official playground:

const popNav  = useRef<typeof Popover>(null)
const handleItemClick = (e: React.MouseEvent<HTMLInputElement>) => {
    popNav?.current?.openBy(e.target)
}

Fails with

Property 'openBy' does not exist on type 'FC<PopoverPropTypes>'.  TS2339

    20 |     const popNav  = useRef<typeof Popover>(null)
    21 |     const handleItemClick = (e: React.MouseEvent<HTMLInputElement>) => {
  > 22 |         popNav?.current?.openBy(e.target)
       |                          ^
    23 |     }
    24 | 

Why? Because
declare const Popover: FC<PopoverPropTypes>;
is just interface PopoverPropTypes extends WithWebComponentPropTypes and therefore has no openBy function...

So I wonder why do you even say you support Typescript if even basic functions needed to operate the component (e.g: popover needs to open) is not working?
Also I refer to my Discussion I had made in January about a similar matter with TS...

I end up using TS with loads of // @ts-ignore comments ....

[Lukas742]

Hello @kbachl

to use the publicly exposed methods of components you need to type your ref with the corresponding interface. For popovers this is Ui5PopoverDomRef. You can find all available interfaces for the main package here and for charts here.

I also created a codesandbox which implements the behavior of your example.

If you have a lot of ts-errors, forcing you to use ts-ignore, please tell us where these errors are thrown and we will gladly try to find a solution and fix them. Without any reproducible examples there is unfortunately not much that we can do.

One last thing, with our latest release we improved the typings of event-handlers, maybe this will solve some ts-errors for you as well.

[kbachl]

@Lukas742
thanks for the info. Two things I would like to add:

1st.: shouldnt this also belong into the https://sap.github.io/ui5-webcomponents-react Documentation?
2nd: I find it quite irritating that the naming is off the real components - why not use e.g.:
interface Popover for Popover.js but instead invent a Ui5PopoverDomRef ?

If you have a lot of ts-errors, forcing you to use ts-ignore, please tell us where these errors are thrown and we will gladly try to find a solution and fix them. Without any reproducible examples there is unfortunately not much that we can do.

One last thing, with our latest release we improved the typings of event-handlers, maybe this will solve some ts-errors for you as well.

I will have a look at it and let you know any problems I encounter. Im going to migrate a small connector app from HANA XSJS/FioriFE to Java-Microservice/Ui5WebcomponentsReact in the next weeks anyway