Typescript: [JS] React stateless components propTypes error

Created on 4 May 2017  路  4Comments  路  Source: microsoft/TypeScript



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

Question

Most helpful comment

// @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,
}

All 4 comments

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.

Was this page helpful?
0 / 5 - 0 ratings