Typescript doesn't work with JS module PropTypes

Question

I have React module written in plain JS. I don't want rewrite entire module into typescript, so I use just propTypes. E.g.

const Alert = ({
    className = "",
    alert = ""
}) => (
    <div className={`alert ${className}`}>
        {alert}
    </div>
)

Alert.propTypes = {
    className: PropTypes.string,
    alert: PropTypes.string
}

I publish it into npm registry.

Now my new typescript project use this module. So I import that component and expect, that typescript will whisper props and find some error during compilation.

<Alert className="neutral" noExistProp={true} />

I expect that typescript catch noExistProp, but it's not happening, so I probably misunderstood this concept. Is there some way how comunicate Proptypes with typescript?

Answer 1

InferProps provided by prop-types may be helpful, assuming the propTypes are still available after your module has been compiled.

I know you don't wish to modify the existing module but perhaps you can look into writing a .d.ts declaration file in your new project/module for typing up the module's components without rewriting it entirely. Perhaps you could even use InferProps in the declaration. This is the approach most use for supporting typescript with vanillaJS libraries and it's not so bad depending on how many exports you have.

Other than that I'm not sure what option you have I'm afraid.