TypeScript Version: 2.2.1 / nightly (2.2.0-dev.201xxxxx)
Code
const ReactComponent = ({ props }) =>
<div
{props.children}
</div>
ReactComponent.propTypes = {
name: PropTypes.string,
navBar: PropTypes.node,
children: PropTypes.node,
}
Expected behavior:
propTypes is a valid property on React stateless component and should be passed.
Actual behavior:
[js] Property 'propTypes' does not exist on type '({props}: { props: any; }) => Element
You need to tell the compiler that it is a StatelessComponent and not just any random function:
const ReactComponent: React.StatelessComponent<....> = (props) =>
<div>
{props.children}
</div>
I'm using plain JS and not TS, leveraging Typescript 2.3 possibility to check it. Is there any way to silence down some errors that TypeScript engine can't properly infer, as I see big value anyway from other stuff it provides?
// @ts-check
import { PropTypes, StatelessComponent }from "react";
/** @type { StatelessComponent<{name, navBar, children}> } */
const ReactComponent = (props) =>
<div>
{props.children}
</div>;
ReactComponent.propTypes = {
name: PropTypes.string,
navBar: PropTypes.node,
children: PropTypes.node,
}
Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.
Most helpful comment