Typescript Redux-Form 功能组件不可分配给参数错误

Question

收到此错误<html>TS2345: Argument of type '({ createReturnPackage, handleSubmit, onComplete, isOwnShippingMethod }: Props) =&gt; JSX.Element' is not assignable to parameter of type 'ComponentType&lt;InjectedFormProps&lt;{}, {}, string&gt;&gt;'.<br/>Type '({ createReturnPackage, handleSubmit, onComplete, isOwnShippingMethod }: Props) =&gt; JSX.Element' is not assignable to type 'FunctionComponent&lt;InjectedFormProps&lt;{}, {}, string&gt;&gt;'.<br/>Types of parameters '__0' and 'props' are incompatible.<br/>Type 'InjectedFormProps&lt;{}, {}, string&gt; &amp; { children?: ReactNode; }' is missing the following properties from type 'Props': createReturnPackage, onComplete, isOwnShippingMethod <html>TS2345: Argument of type '({ createReturnPackage, handleSubmit, onComplete, isOwnShippingMethod }: Props) =&gt; JSX.Element' is not assignable to parameter of type 'ComponentType&lt;InjectedFormProps&lt;{}, {}, string&gt;&gt;'.<br/>Type '({ createReturnPackage, handleSubmit, onComplete, isOwnShippingMethod }: Props) =&gt; JSX.Element' is not assignable to type 'FunctionComponent&lt;InjectedFormProps&lt;{}, {}, string&gt;&gt;'.<br/>Types of parameters '__0' and 'props' are incompatible.<br/>Type 'InjectedFormProps&lt;{}, {}, string&gt; &amp; { children?: ReactNode; }' is missing the following properties from type 'Props': createReturnPackage, onComplete, isOwnShippingMethod

这是我的以下代码，它是一个使用 redux-forms 的功能性无状态 typescript 反应组件，我收到分配错误，它仍然按预期运行和工作，但会通过我的 buildci。 任何有助于理解错误以帮助代码通过我的持续集成的帮助将不胜感激。 我删除了显示不必要信息的导入：

// @flow
import React, { useEffect, useMemo } from 'react'
import { useDispatch, useSelector, connect } from 'react-redux'
import { reduxForm, Field, formValueSelector } from 'redux-form'


export const RETURN_SHIPPING_FORM = 'return-shipping-form'

type CurrentAddressProps = {
  currentAddress: ReturnAddress
  showReturnAddress: () => void
}

function CurrentAddressSection({ currentAddress, showReturnAddress }: CurrentAddressProps) {
  return (
    <>
      <Subtitle className={styles.addressHeading}>{__('AGENCY RETURN ADDRESS')}</Subtitle>
      {currentAddress && (
        <>
          <Body2>{`${currentAddress.firstName} ${currentAddress.lastName}`}</Body2>
          <Body2>{currentAddress.phone}</Body2>
          <Body2>{currentAddress.street1}</Body2>
          <Body2>{currentAddress.street2}</Body2>
          <Body2>{`${currentAddress.city}, ${currentAddress.state} ${currentAddress.zip}`}</Body2>
        </>
      )}
      <div className={styles.input}>
        <LinkButton onClick={() => showReturnAddress()} data-testid="changeAddress">
          {__('Change Address')}
        </LinkButton>
      </div>
    </>
  )
}

function WarningMessage() {
  return (
    <Body2 className={styles.warningMessage}>
      {__(
        'Before we can process your RMA ticket please provide a valid return address.  Click "Add Address" above to get started.'
      )}
    </Body2>
  )
}

function OwnShippingMethod({ shippingProvider }: { shippingProvider: string }) {
  return (
    <>
      <Subtitle className={styles.addressHeading}>{__('ALTERNATIVE SHIPPING METHODS')}</Subtitle>
      <Body2 className={styles.descriptionText}>
        {__(
          'Axon uses $[shippingProvider] for return shipping services. If you want to use your own shipping method, select the option below. You will still be able to print packing slips to place inside the return shipping boxes.',
          { shippingProvider: shippingProvider }
        )}
      </Body2>
      <div className={styles.input}>
        <Field
          component={CheckboxForm}
          type="checkbox"
          label={__('I will use my own shipping method')}
          name="ownShippingMethod"
        />
      </div>
    </>
  )
}

type Props = {
  createReturnPackage: () => void
  handleSubmit: (createReturnPackage: () => void) => void
  onComplete: () => void
  isOwnShippingMethod: boolean
}

const Shipping = ({ createReturnPackage, handleSubmit, onComplete, isOwnShippingMethod }: Props) => {
  const dispatch = useDispatch()
  const returnItems = useSelector<AppState, Array<ReturnItem>>(getReturnItems)
  const returnTypeSelectedValue = useSelector<AppState, string>(getReturnTypeSelectedValue)
  const currentAddress = useSelector<AppState, ReturnAddress>(getCurrentAddress)
  const showShippingMethod = useSelector<AppState, boolean>(getCountryShippingMethodConfig)

  const isSubmitSuccessSelector = useSelector<AppState, boolean>(isSubmitSuccess)
  const isSubmittingSelector = useSelector<AppState, boolean>(isSubmitting)
  const addressList = useSelector<AppState, Array<object>>(getAddressList)
  const dimensionMeasureUnit = useSelector<AppState, string>(getDimensionMeasureUnitConfig)
  const weightMeasureUnit = useSelector<AppState, string>(getWeightMeasureUnitConfig)
  const shippingProvider = useSelector<AppState, string>(getShippingProviderConfig)
  const hasTaser10 = useSelector<AppState, Function>(isFeatureEnabled)(FeatureFlagName.Taser10)

  useEffect(() => {
    dispatch(listAddresses())
  }, [dispatch])

  const getErrorStatus = useMemo(() => {
    const errorCount = {}
    returnItems.forEach(item => {
      const errorStatus = item.deviceMeta.errorStatus
      errorCount[getErrorStatusText(errorStatus)] = (errorCount[getErrorStatusText(errorStatus)] || 0) + 1
    })
    const errorCountDisplay: Array<Array<string>> = Object.entries(errorCount)
    return (
      <>
        {errorCountDisplay.map(error => (
          <Stack key={error[0]} direction="row" justifyContent="space-between">
            <Body2>{error[0]}</Body2>
            <Body2>{error[1]}</Body2>
          </Stack>
        ))}
      </>
    )
  }, [returnItems])

  const getModel = useMemo(() => {
    const deviceListGroupByName = getDeviceNumberGroupByName(returnItems)
    return (
      <>
        {map(deviceListGroupByName, item => (
          <Stack direction="row" justifyContent="space-between">
            <Body2>{getModelInfo(item[0].deviceModel).title}</Body2>
            <Body2>{item.length}</Body2>
          </Stack>
        ))}
      </>
    )
  }, [returnItems, returnTypeSelectedValue])

  const hasCurrentAddress = currentAddress === null
  return (
    <DocumentTitle title={__('Shipping')}>
      <div>
        <Headline className={styles.title}>{__('Shipping')}</Headline>
        <Body2 className={styles.descriptionText}>
          {__('Your return is almost ready to go.')}
          <br />
          {showShippingMethod
            ? __(
                'Confirm your return address and enter your package dimensions to print out pre-paid $[shippingProvider] shipping labels on your local printer. ',
                { shippingProvider: shippingProvider }
              )
            : __('Please confirm your return address. ')}
        </Body2>
        <Grid columnGap={'none'}>
          {hasTaser10 && (
            <Grid.Item columnSpan={3} columnStart={1} rowStart={1}>
              <Card width={1}>
                <Card.Header title={__('Devices Added')} />
                <Card.Body>
                  <Stack space="m">
                    <Label>{__('MODEL')}</Label>
                    {getModel}
                  </Stack>
                </Card.Body>
                <Divider variant={Divider.variants.subtle} />
                <Card.Body>
                  <Stack space="m">
                    <Label>{__('ERROR STATUS')}</Label>
                    {getErrorStatus}
                  </Stack>
                </Card.Body>
              </Card>
            </Grid.Item>
          )}
          <Grid.Item columnSpan={9} columnStart={hasTaser10 ? 5 : 1} rowStart={1}>
            <div>
              {addressList.length > 0 ? (
                <CurrentAddressSection
                  currentAddress={currentAddress}
                  showReturnAddress={() => dispatch(showReturnAddress())}
                />
              ) : (
                <div className={styles.input}>
                  <LinkButton onClick={dispatch(createReturnAddress)} data-testid="addAddress">
                    {__('Add Address')}
                  </LinkButton>
                </div>
              )}
              <hr className={styles.divider} />
              <form>
                {showShippingMethod && (
                  <>
                    {!isOwnShippingMethod && (
                      <>
                        <ShippingDimensionBoxes
                          dimensionMeasureUnit={dimensionMeasureUnit}
                          weightMeasureUnit={weightMeasureUnit}
                        />
                        <hr className={styles.divider} />
                      </>
                    )}
                    <OwnShippingMethod shippingProvider={shippingProvider} />
                  </>
                )}

                <BottomControlBar
                  renderComponent={addressList.length == 0 ? <WarningMessage /> : null}
                  labelButton={__('Submit Return')}
                  disabled={hasCurrentAddress || isSubmittingSelector}
                  onClick={handleSubmit(createReturnPackage)}
                />
              </form>
              {isSubmitSuccessSelector && onComplete()}
            </div>
          </Grid.Item>
        </Grid>
      </div>
    </DocumentTitle>
  )
}

const mapStateToProps = state => {
  const showShippingMethod = getCountryShippingMethodConfig(state)
  return {
    isOwnShippingMethod: formValueSelector(RETURN_SHIPPING_FORM)(state, 'ownShippingMethod'),
    initialValues: {
      dimensionBoxes: [{}],
      ownShippingMethod: !showShippingMethod,
    },
  }
}

export default connect(mapStateToProps, { createReturnPackage })(
  reduxForm({
    form: RETURN_SHIPPING_FORM,
  })(Shipping)
)

发生错误的地方