Creating a generic based component

Most of the examples I see for typing components look like this:

interface MyComponentProps {
  // ...
}

const MyComponent: ParentComponent<MyComponentProps> = (props) => {
  // ...
};

interface MyComponentProps {
  // ...
}

const MyComponent: ParentComponent<MyComponentProps> = (props) => {
  // ...
};

The problem is that with this pattern, I am not sure how I would go about creating a typescript generic based component. For example, in React I would normally do:

interface MyComponentProps<TData> {
  data: TData;
  // ...
}

const MyComponent = <TData,>(props: MyComponentProps<TData>) => {
  // ...
};

interface MyComponentProps<TData> {
  data: TData;
  // ...
}

const MyComponent = <TData,>(props: MyComponentProps<TData>) => {
  // ...
};

While it seems like I can do the above in SolidJS, props in this case not longer has children as a prop (and I can't do props: ParentComponent<MyComponentProps<TData>> as that causes other typing errors). Is there a standard way of creating a typescript generic based component in SolidJS or do I need to explicitly define children in the props type?

4 Replies

Otonashi•2y ago

use ParentProps iirc

Ryan•2y ago

Yea, looks like there are ParentProps and ComponentProps if you want to type the props directly instead of the component itself, thanks.

Otonashi•2y ago

ComponentProps is for doing the reverse, getting the props type from a component

Ryan•2y ago

Yea, I noticed that when trying to use it

Gaming

Programming

Creating a generic based component