Using with React + Typescript

[makoven]

Hello. Is it possible to somehow get the types for the React JSX (TSX). Every time I try to use an lit-element inside a JSX component, I get the error:

Property 't-btn' does not exist on type 'JSX.IntrinsicElements'

https://codesandbox.io/s/react-typescript-forked-uohq1?file=/src/index.tsx
(example from #1052)

[justinfagnani]

I'm not sure what's causing JSX intrinsics checking to kick in - I thought intrinsics should only be checked if IntrinsicElements is non-empty - but since it is, you'll need to define an interface for <t-btn>:

interface TButton {
  count: number;
}

declare global {
  interface HTMLElementTagNameMap {
    "t-btn": MyElement;
  }
  /* eslint-disable @typescript-eslint/no-namespace */
  namespace JSX {
    interface IntrinsicElements {
      "t-btn": TButton;
    }
  }
}

https://codesandbox.io/s/react-typescript-forked-7lwx3?file=/src/t-btn.ts

[Deleted user]

@justinfagnani

Of course, I can manually define the desired interface. It is simply not clear why the library does not have a helper for inferring the desired interface from the lit-element component class. As a result, all the lit-element components that I tried cannot be used in the JSX frameworks

[kevinpschaaf]

You could consider using https://github.com/lit/lit/tree/main/packages/labs/react to create a React wrapper which you can use in TSX with good typings.

[taylor-vann]

Related to #2648

Closing :) webcomponent types are reflected in React props with the the react wrapper @kevinpschaaf referenced. Event handler types can be typecasted as well.

[RayLuxembourg]

Related to #2648

Closing :) webcomponent types are reflected in React props with the the react wrapper @kevinpschaaf referenced. Event handler types can be typecasted as well.

That's not true, when you want to have a required prop, it is not reflected at all, everything is options
Is there a solution for this problem, I am unable to reflect types properly...

Name should be required not optional

[justinfagnani]

@RayLuxembourg for custom elements, all properties are necessarily optional, because you can always do document.createElement('my-element') and then provide no additional property assignments.

If we have a feature request on the React wrapper for transforming some properties, we should open that on the lit/lit monorepo for the @lit-labs/react package.