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

props

in this case not longer has

children

children

as a prop (and I can't do

props: ParentComponent<MyComponentProps<TData>>

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

children

in the props type?

SolidJS•4y ago•

4 replies

Ryan

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

props

in this case not longer has

children

children

as a prop (and I can't do

props: ParentComponent<MyComponentProps<TData>>

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

children

in the props type?

Creating a generic based component

Similar Threads

Creating a generic based component

Similar Threads

Similar Threads

Similar Threads