TS Error Type 'ForwardRefExoticComponent<Omit<TextProps<ElementType<any>>, "ref"> & RefAttributes<unknown>>' is not assignable to type 'TextComponent'. #7

Activity

1. hungify2022 commented on Oct 30, 2023

   

   hungify2022

   on Oct 30, 2023

   Last edited by hungify2022

   More actions

   Due to the Typescript version.
   An error appears on ^4.9.5 but ^4.7.4 doesn't.
   Someone Typescript expert can resolve that.
2. itisnas commented on Nov 5, 2023

   

   itisnas

   on Nov 5, 2023

   More actions

   Did anyone solve this?
3. cyhfe commented on Nov 27, 2023

   

   cyhfe

   on Nov 27, 2023

   More actions

   export const Text = React.forwardRef(
     <C extends React.ElementType = "span">(
       { as, color, children }: TextProps<C>,
       ref?: PolymorphicRef<C>
     ) => {
       const Component = as || "span";
   
       const style = color ? { style: { color } } : {};
   
       return (
         <Component {...style} ref={ref}>
           {children}
         </Component>
       );
     }
   // add this
   ) as TextComponent;
4. ozguruysal commented on Dec 5, 2023

   

   ozguruysal

   on Dec 5, 2023

   More actions

   Change the return type as in the comment below.

   type TextComponent = <C extends React.ElementType = "span">(
     props: TextProps<C>
   ) => React.ReactElement | null; // Change this to React.ReactNode | null;

   👍React with 👍1Reacted by Vinh

   🎉React with 🎉2Reacted by Matthew Toledo and Anton Zhuravlev

   😕React with 😕1Reacted by hungify
5. hungify commented on Dec 14, 2023

   

   hungify

   on Dec 14, 2023

   More actions

   It still gives me error.

   Type 'ForwardRefExoticComponent<Omit<TextProps<ElementType<any>>, "ref"> & RefAttributes<unknown>>' is not assignable to type 'TextComponent'.
     Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.
       Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.ts(2322)
   ``
   
6. ozguruysal commented on Dec 15, 2023

   

   ozguruysal

   on Dec 15, 2023

   More actions

   @hungify not sure. I don't see any error when I make that change. Here's the playground link with the update I suggested above.

   ❤️React with ❤️1Reacted by hungify
7. hungify commented on Dec 16, 2023

   

   hungify

   on Dec 16, 2023

   More actions

   @ozguruysal
   Thank you!
   But I have a new problem, how to resolve it

   Text.displayName = 'Text';
   Property 'displayName' does not exist on type 'TextComponent'.
   

   Here is my idea

   type TextComponent = (<C extends React.ElementType = 'span'>(
     props: TextProps<C>,
   ) => React.ReactNode | null) & {
     displayName?: string;
   };
8. ozguruysal commented on Dec 16, 2023

   

   ozguruysal

   on Dec 16, 2023

   More actions

   I think that's because React.forwardRef() method's return type is overriden. I'm not 100% sure but maybe you can type the component like this so that you also get defaultProps and propTypes in case you need.

   type TextComponent<C extends React.ElementType = "span"> = ((
     props: TextProps<C>
   ) => React.ReactNode | null) & React.ForwardRefExoticComponent<TextProps<C>>;

   ❤️React with ❤️1Reacted by hungify