Seems to be returning Typescript type for generic component, not imported component
See original GitHub issueDescribe the bug
I just upgraded from v1 to v2.2.1, and I’m now getting Typescript errors. I guess the types might have broken, or this bug was concealed before (with any
perhaps).
when I use register
to load a component, it seems to just set the component type to React.ComponentClass<{}, any>
, rather than the type of the component:
This means I then get Typescript errors when I try and use the component, e.g.
Type '{ bottomBorder: true; leftIconOverride: Element; actionIcons: Element[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, any, any>> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'bottomBorder' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, any, any>> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
253 bottomBorder
Code snippet
const NavigationHeader = register({
loader: () => require('Components/Header/Navigation/NavigationHeader'),
group: HOME_SECONDARY_SCREENS,
})
//...
<RootCardStack.Screen
name="MyScreen"
key="MyScreen"
component={MyScreen}
options={{
header: (props: StackHeaderProps) => {
return (
<NavigationHeader
bottomBorder
leftIconOverride={<BackButton />}
/>
)
},
}}
/>,
Expected behavior I would expect the types of the actual component to be returned
Screenshots If applicable, add screenshots to help explain your problem.
Smartphone (please complete the following information):
- React Native 0.66
- Typescript 4.8.4
Issue Analytics
- State:
- Created a year ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
React/TypeScript - Extending component with generic type ...
If the function arguments and return are typed then it's not necessary. React.FunctionComponent doesn't work with generic components, so just ...
Read more >[TypeScript] styled wrapper doesn't preserve generic props
Using the styled(Component) method while wrapping a component with generic props doesn't preserve the generic argument, it simply defaults it to ...
Read more >Functional React components with generic props in TypeScript
In this article, we explore writing functional React components with TypeScript using generic props. By doing so, we can create reusable and ...
Read more >Typescript generics for React developers
Looking into why we need generics in Typescript, and how to use them to develop re-usable React components. And as a bonus: the...
Read more >Documentation - TypeScript 3.8
import type only imports declarations to be used for type annotations and declarations. It always gets fully erased, so there's no remnant of...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I went to check if I’d done something wrong here, so could maybe just add a Typescript section at the bottom?
But yeah…all makes sense! Thanks.
@matt-dalton I will try to add it. I want to migrate documentation to
Docusaurus v2
and use github workflow for docs publishing, because right now I do everything manually. So yeah, good point! I will try to add it and re-work documentation in the future! 😃