DEV Community

Discussion on: Notes on TypeScript: Inferring React PropTypes

Collapse
 
pacahon profile image
Sergei

Thanks for the article. I've tried this solution, but stuck with an error:

Type 'string | null | undefined' is not assignable to type 'string | undefined'

<div className={className}
                  ~~~~~~~~~

  node_modules/@types/react/index.d.ts:1645:9
    1645         className?: string;

I'm using React class component declaration and @types/react

const defaultProps = {
    className: 'user'
};
const propTypes = {
    className: PropTypes.string,
};

class User extends React.Component<UserProps> {
    static defaultProps = defaultProps;
    static propTypes: {};

    render() {
        let {className} = this.props;
        return (
            <div className={className}>test</div>
        );
    }
}
User.propTypes = propTypes;

Without declaring className on propTypes it fails with an error Property 'className' does not exist on type'Readonly<InferPropTypes<{...`

What could be the reason for this?

Collapse
 
busypeoples profile image
A. Sharif

Thanks for the question. Could you build a codesandbox example, so we can see the complete example and then try to fix it from there?

Collapse
 
pacahon profile image
Sergei

Sure, here it is codesandbox.io/s/weathered-snowfla...
Looks like If disable strict mode in tsconfig.json it works fine.

Thread Thread
 
busypeoples profile image
A. Sharif

Excellent, thanks!
Will try it out and provide some feedback.

Thread Thread
 
eriksjaastad profile image
Erik Sjaastad

Was this solved? This is one of the few articles using InferProps and thank you so much for writing it!