I'm writing in JavaScript, with jsCheck: true in my jsconfig file, and using vscode for intellisense autocomplete
I declare the type for Options in one file:
/**
* @typedef {Object} Option
* @property {string} value machine readable value
* @property {string} [label] human readable label
**/
I import it elsewhere, along with defining the type for a react component
/** @typedef {import('./MyMenuComponent').Option} Option */
/**
* @typedef {Object} Props
* @property {string} menuSubheadingKey used to help group options
* ... more properties
* @property {Option} option to be rendered
*/
/**
* @type {React.FC<Props>}
*/
const MenuOption = React.ForwardRef(({
menuSubheadingKey,
// ... more props
option
}, ref) => {
// render component here - no errors
})
MenuOption.propTypes = {
menuSubheadingKey: string.isRequired,
// ... more prop types
option: shape({ value: string.isRequired, label: string.isRequired }).isRequired // <---typescript error ts2322
}
The text of the error looks like:
Type 'Validator<InferProps<{value: Validator<string>; label: Validator<string>; }>>' is not assignable to type 'Validator<Option>'.
Type 'InferProps<{value: Validator<string>; label: Validator<string>; }> is not assignable to type Option
Property 'value' is optional in type 'InferProps<{value: Validator<string>; label: Validator<string>; }>' but required in type 'Option'
MenuOption.js(13,8): The expected type comes from property 'option' which is declared here on type 'WeakValidationMap<Props>'
I have default props for some of the other props, but not the two above. I've made both value and label required for this prop deliberately.
Why does it think that value is optional in the proptype declaration?