如何使用TypeScript正确键入React连接的组件

Question

我在React中很难处理打字稿和连接的组件。 我有这个组件：

import * as React from "react";
import { Grid } from "@material-ui/core";
import { connect } from "react-redux";
import * as Redux from "redux";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";

import { BreakingNewsPlatforms } from "shared/constants/breakingNewsPlatforms";
import * as s from "./AlertsFormBuilder.css";
import i18n from "i18n/i18n";
import { setJ5BreakingNewsStatusCode, setHideFromMobile, handleSetBreakingNewsStatusCode } from "actions/index";

interface StateProps {
    breakingNewsMobile: string;
    breakingNewsTablet: string;
    hideFromMobile: string;
    j5breakingNews: string;
}

interface DispatchProps {
    setHideFromMobile: () => void;
    setJ5BreakingNewsStatusCode: () => void;
    handleSetBreakingNewsStatusCode: (name: string) => void;
}

interface OwnProps {}

interface OwnState {}

type AlertsFormBuilderProps = StateProps & DispatchProps & OwnProps;

class AlertsFormBuilder extends React.Component<AlertsFormBuilderProps, OwnState> {
    render() {
        return (
            <Grid container>
                <fieldset className={s.AlertsContainer}>
                    <legend>{i18n.t("groupBroadcast.appOptions.alerts")}    </legend>
                        <Grid container spacing={16}>
                            <Grid item xs={6}>
                                <FormControlLabel
                                control={
                                    <Checkbox
                                    value="mobile"
                                    id="mobile"
                                    name="mobile"
                                    checked=    {this.props.breakingNewsMobile}
                                    onChange={() =>
                                            this.props.handleSetBreakingNewsStatusCode(BreakingNewsPlatforms.MOBILE)
                                        }
                                    />
                                }
                            label={i18n.t("groupBroadcast.appOptions.mobile")}
                        />
                        </Grid>
                        <Grid item xs={6}>
                            <FormControlLabel
                            control={
                                <Checkbox
                                    value="tablet"
                                    id="tablet"
                                    name="tablet"
                                    checked={this.props.breakingNewsTablet}
                                    onChange={() =>
                                        this.props.handleSetBreakingNewsStatusCode(BreakingNewsPlatforms.TABLET)
                                        }
                                    />
                                }
                                label={i18n.t("groupBroadcast.appOptions.tablet")}
                            />
                        </Grid>
                    </Grid>
                </fieldset>
                <Grid item xs={12}>
                        <Grid container spacing={16} className={s.AppOptions}>
                        <Grid item xs={6}>
                            <FormControlLabel
                                control={
                                    <Checkbox
                                        value="hideFromMobile"
                                        checked={this.props.hideFromMobile}    
                                        onChange={this.props.setHideFromMobile}
                                    />
                                }
                                label={i18n.t("groupBroadcast.appOptions.hideOnApps")}
                        />
                        </Grid>
                        <Grid item xs={6}>
                            <FormControlLabel
                                control={
                                    <Checkbox
                                        disabled={!this.props.breakingNewsMobile && !this.props.breakingNewsTablet}
                                        value="breakingNews"
                                        checked={this.props.j5breakingNews}
                                        onChange={this.props.setJ5BreakingNewsStatusCode}
                                    />
                                }
                                label={i18n.t("groupBroadcast.appOptions.showALaUne")}
                            />
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        );
    }
}

const mapStateToProps = (state): StateProps => ({
    breakingNewsMobile: state.bundleForms.broadcastForm.breakingNewsMobile.value,
    breakingNewsTablet: state.bundleForms.broadcastForm.breakingNewsTablet.value,
    hideFromMobile: state.bundleForms.broadcastForm.hideFromMobile.value,
    j5breakingNews:     state.bundleForms.broadcastForm.j5breakingNews.value,
});

const mapDispatchToProps = (dispatch: Redux.Dispatch<any>): DispatchProps => ({
    setHideFromMobile: () => dispatch(setHideFromMobile()),
    setJ5BreakingNewsStatusCode: () => dispatch(setJ5BreakingNewsStatusCode()),
    handleSetBreakingNewsStatusCode: (name: string) => dispatch(handleSetBreakingNewsStatusCode(name)),
});

export default connect<StateProps, DispatchProps, OwnProps>(
    mapStateToProps,
    mapDispatchToProps
)(AlertsFormBuilder);

但是，打字时，打字稿抱怨：

TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<AlertsFormBuilder> & Readonly<{ children?: ReactNo...'. Type '{}' is not assignable to type 'Readonly<AlertsFormBuilderProps>'.

这就像期望我将道具传递给组件，而我不想这么做。该组件不接收任何道具，所有道具均来自mapStateToProps和mapDispatchToProps。

当我调用组件时，我只是按照<AlertsFormBuilder />的名称来调用它，因为我不需要将任何道具传递给它。

让我通过而不抱怨的唯一方法是

enter code here

interface StateProps {
    breakingNewsMobile?: string;
    breakingNewsTablet?: string;
    hideFromMobile?: string;
    j5breakingNews?: string;
}

interface DispatchProps {
    setHideFromMobile?: () => void;
    setJ5BreakingNewsStatusCode?: () => void;
    handleSetBreakingNewsStatusCode?: (name: string) => void;
}

我知道这是不正确的，因为这是说这些道具在实际上不需要通过时并不是强制性的。

如何解决此问题？

谢谢