DEV Community

Discussion on: Ref forwarding with React function components and Typescript

View post

Replies for: the @types/react module should declare the global JSX namespace here: declare global { namespace JSX { interface Element extends Rea...

Collapse
 
roblevintennis profile image
Rob Levin • • Edited

Yeah, I think I was doing something wrong to not be able to use JSX.Element but I forget the exact error.

Regarding it being worth the effort I'm still on the fence myself. I think Typescript is a great place to apply the Pareto Principle. I barely use generics and I'm going to let that happen naturally (or not), but I'm not willing to invest as much time as it would take to learn a new language just to please Typescript. But yeah, I like the type safety overall. Applying what you described for React.forwardRef today on my project:

export const TabButton = React.forwardRef<HTMLButtonElement, TabButtonProps>(
  (
    {
...bunch of props
    }: TabButtonProps,
    tabRef: React.ForwardedRef<HTMLButtonElement>,
  ): ReactElement => {...}
Enter fullscreen mode Exit fullscreen mode

is about as terse as I'm willing to go for now. Maybe I'll surprise myself and get more fancy later down the road :-)