Styling components with required props triggering an TypeScript error

[theBork]

When I try to wrap custom React components with goober's "styled" method, TypeScript shows error im cases when component have required props.

import React from 'react'
import { styled } from 'goober'

interface IProps {
  myProp: string
}

const Component: React.FC<IProps> = (props) => {
  return <div>{props.myProp}</div>
}

const StyledComponent = styled(Component)``
/* Argument of type 'FC<IProps>' is not assignable to parameter of type 'Element | ElementClass'.
Type 'FunctionComponent<IProps>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more. */

When I change myProp to optional, there is no errors.

TypeScript: 4.7.4
Goober: 2.1.10

Sandbox with problem's example: https://codesandbox.io/s/goober-typescript-styled-custom-component-y25bq0?file=/src/Component.tsx

[cristianbote]

Thanks @theBork for opening this issue.

Might be due to this line https://github.com/cristianbote/goober/blob/master/goober.d.ts#L32 wondering how can I add the FC interface in there 🤔. Is there a JSX.FC maybe?

[theBork]

@cristianbote yes, I think that JSX.Element, that used in this line of code describes type of Element like that:

<Component myProp={myProp} />

or

React.createElement(Component, { myProp })

When we provide our component as argument to styled method, they are not Element yet, so I think changing to JSX.FC will help. I can make PR next days, if you want :)

[cristianbote]

That would be super helpful @theBork! Much appreciated.

[86Magical]

One way i was able to solve this was adding types to the styled(tag)

i already created a pull request for it

Also i was able to get it done with

React.ElementType as well but i couldn't add that to the repo as Goober is used/can be used in a none react app
8b7e289