Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add explicit return types #876

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

justinbup
Copy link

Describe the issue/change

The return type of NumericFormat and PatternFormat was being inferred as JSX.Element which caused the following type errors (typescript v5.7.3 and @types/react v19.0.4):

[redacted] - error TS2786: 'NumericFormat' cannot be used as a JSX component.
  Its type '<BaseType = InputAttributes>(props: NumericFormatProps<BaseType>) => Element' is not a valid JSX element type.
    Type '<BaseType = InputAttributes>(props: NumericFormatProps<BaseType>) => Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'Element' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

58             <NumericFormat
                ~~~~~~~~~~~~~

  node_modules/@types/react/index.d.ts:387:9
    387         children: ReactNode;
                ~~~~~~~~
    'children' is declared here.

and

[redacted] - error TS2786: 'PatternFormat' cannot be used as a JSX component.
  Its type '<BaseType = InputAttributes>(props: PatternFormatProps<BaseType>) => Element' is not a valid JSX element type.
    Type '<BaseType = InputAttributes>(props: PatternFormatProps<BaseType>) => Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'Element' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

64         <PatternFormat
            ~~~~~~~~~~~~~

  node_modules/@types/react/index.d.ts:387:9
    387         children: ReactNode;
                ~~~~~~~~
    'children' is declared here.

Add CodeSandbox link to illustrate the issue (If applicable)

Sample code that has an issue:

const SomeWrappingComponent = ({component}: {component: React.ReactElement}) => component

const App = () => {
  return <SomeWrappingComponent component={<NumericFormat />} />
}

Describe specs for failing cases if this is an issue (If applicable)

Describe the changes proposed/implemented in this PR

Instead of being inferred, explicitly add the return type of React.ReactElement which represents a JSX element.

Link Github issue if this PR solved an existing issue

Example usage (If applicable)

Screenshot (If applicable)

Screenshot 2025-01-12 at 6 10 35 PM

Please check which browsers were used for testing

  • Chrome
  • Chrome (Android)
  • Safari (OSX)
  • Safari (iOS)
  • Firefox
  • Firefox (Android)

The return type of `NumericFormat` and `PatternFormat` was being inferred as
`JSX.Element` which caused the following type error (typescript v5.7.3):

```
error TS2786: 'PatternFormat' cannot be used as a JSX component.
  Its type '<BaseType = InputAttributes>(props: PatternFormatProps<BaseType>) => Element' is not a valid JSX element type.
    Type '<BaseType = InputAttributes>(props: PatternFormatProps<BaseType>) => Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'Element' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.
```

Instead of being inferred, explicitly add the return type of `React.ReactElement`
which represents a JSX element.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants