How can you provide <Props> type to component in Typescript?

[BrianJVarley]

Hey @BBKolton, I'm using this package in a React TypeScript project, so far it's been helpful to bridge the gap converting from a Custom Element to React component.

But something I'm not clear on is how you provide a concrete Props type to the reactifyWc('my-component') call. I did see a related PR here actually to provide the Props type - https://github.com/BBKolton/reactify-wc/issues/6. But in my example below the name, age props are not showing in intellisense although I've provided them in the Test interface.

Could you provide some code examples of how you attach Props to a component created with reactifyWc? I don't see any similar examples in the README.

Below is my attempt at attaching props and resulting outcome in intellisense:

Creating Component Wrapper:

import reactifyWc from "reactify-wc";

interface Test {
  name: string;
  age: number;
}

export function createReactComponent(elementName: string) {
  return reactifyWc<Test>(elementName);
}

Result in VsCode:

Instead of picking up the Test type, the IDE is picking up the component's type as 'IntrinsicAttributes & RefAttributes<any>' somehow.

Type '{ name: any; age: any; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'.
  Property 'name' does not exist on type 'IntrinsicAttributes & RefAttributes<any>'.

[bardoo]

Added a PR to fix this: https://github.com/BBKolton/reactify-wc/pull/18

[brion-fuller]

This has been merged. Can you check it out?

[Inoir]

Hey, i just tried to use this package with typescript, and it seems there is a bug again with passing Props. You still can pass them, but they are not on the types output.

Output should be something like ForwardRefExoticComponent<Props & RefAttributes>.