React and TypeScript TS2740

[stevenvachon]

Support Question

I'm getting this error:

ERROR in /component.tsx(6,10)

TS2740: Type '{ ref: RefObject<PerspectiveViewer>; }' is missing the following properties from type 'PerspectiveViewer': load, update, notifyResize, delete, and 249 more. 

---

types.ts:

import { /*DOMElement, */Ref } from 'react';
import { PerspectiveViewer as PerspectiveViewerOriginal } from '@finos/perspective-viewer';

export interface PerspectiveViewer extends PerspectiveViewerOriginal {
  ref: Ref<PerspectiveViewerOriginal | null>;
}

//export interface PerspectiveViewer extends PerspectiveViewerOriginal, DOMElement<any, any> {}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'perspective-viewer': PerspectiveViewer;
    }
  }
}

component.tsx:

import { PerspectiveViewer } from 'types';
import React, { createRef, PureComponent } from 'react';
import '@finos/perspective-viewer';

export class PerspectivePanel extends PureComponent {
  perspectiveViewer = createRef<PerspectiveViewer | HTMLElement | null>();

  render() {
    return (<perspective-viewer ref={this.perspectiveViewer} />);
  }
}

[texodus]

Thanks for the bug report!

We've updated the perspective-viewer typings and added an example Typescript + React application to the /examples package in #877 . These changes will be released in 0.4.1. If you're still having issues, please feel free to re-open.

[stevenvachon]

@texodus This is a big improvement, thank you. I've run into an issue with it, however:

<perspective-viewer
  className="perspective-viewer-material-dense-dark"
  ref={this.viewer}
/>

produces

<div classname="perspective-viewer-material-dense-dark">
...

Using class as an attribute instead of className results in:

TS2322: Type '{ class: string; ref: RefObject<HTMLPerspectiveViewerElement>; style: { height: number; width: number; position: "relative"; zIndex: number; }; }' is not assignable to type 'DetailedHTMLProps<ReactPerspectiveViewerHTMLAttributes<HTMLPerspectiveViewerElement>, HTMLPerspectiveViewerElement>'.
    Property 'class' does not exist on type 'DetailedHTMLProps<ReactPerspectiveViewerHTMLAttributes<HTMLPerspectiveViewerElement>, HTMLPerspectiveViewerElement>'.

[zemeolotu]

@stevenvachon Doesn't look like the react typings have class as an html attribute, just className

[texodus]

According to the React docs, class is supposed to be correct here.

It looks like class comes from React.HTMLElement, but in our index.d.ts we are defining the base HTMLPerspectiveViewerElement as extending React.HTMLAttributes<T> instead. This is one level too deep, DetailedHTMLProps< ... > is a React.HTMLAttributes< ... > (e.g. where ref comes from), and T is a native DOM element so it should not also inherit HTMLAttributes< ... >.

EDIT

On closer inspection, this solution does not work either. It seems Custom Element support in JSX is limited ala here, and thus would need a wrapper React.Component even to set a ref (though class does work in this way).

[texodus]

#886 should resolve this issue for now via the class prop. Let us know if you have further issues.

[stevenvachon]

Thanks, that fixes it. Would you publish a patch release, please?