[react]: defaultProps doesn't work when FunctionalComponent<P> is used #30695
Description
- I tried using the
@types/reactpackage and had problems. - I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
- I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
- Mention the authors (see
Definitions by:inindex.d.ts) so they can respond.- Authors: @ferdaber @johnnyreilly @sandersn @RyanCavanaugh @tkrotoff @Kovensky @weswigham
Dependencies:
"typescript": "3.2.0-rc"
"@types/react": "16.7.6",
"@types/react-dom": "16.0.9",
As stated by @Kovensky
defaultProps doesn't properly apply on JSX tag when function component is defined via FunctionalComponent
Code:
import React, { FunctionComponent } from 'react'
type Props = {
onClick: (ev: import('react').MouseEvent<HTMLElement>) => void
children: import('react').ReactChild
color: 'red' | 'green'
}
const Button: FunctionComponent<Props> = ({ onClick: handleClick, color, children }) => (
<button style={{ color }} onClick={handleClick}>
{children}
</button>
)
Button.defaultProps = {
color: 'red'
}
const Test = () => (
<>
/* $ExpectError */
<Button onClick={() => console.log('clicked')}>Click me</Button>
</>
)Related:
#29816
microsoft/TypeScript#27425