Reactjs 当使用React和TypeScript时，一个类型@如何正确连接？

我已经为此挣扎了很长时间。今天坐下来，专门想摆脱剩下的

any

s，但没有成功

import * as React from 'react';
import * as Redux from 'redux';
import { connect } from 'react-redux';
import { ReduxState } from './types';
import { syncItem, displayAlert } from './actionCreators';
import { SyncItemAction, DisplayAlertAction } from './actions';

// Props coming from Redux using `connect` and `mapStateToProps`
type AppData = {
    isSelected: boolean;
    isInEditMode: boolean;
};

// Action creators from `./actionCreators` all wrapped in `dispatch` using `connect` and `mapDispatchToProps`
type AppActions = {
    syncItem: (id: number) => SyncItemAction;
    displayAlert: (text: string) => DisplayAlertAction;
};

// Actual JSX attributes that will be required by the type system.
type AppProps = {
    id: number;
    name: string;
} & Partial<AppData> & Partial<AppActions>; // Making data and actions partial so that using <App /> in JSX doesn't yell.

// The component's inner state.
type AppState = Partial<{
    temp: string;
}>;

@connect<AppData, AppActions, AppProps>(mapStateToProps, mapDispatchToProps)(App) // Or mapDispatchToPropsAlt
export default class App extends React.Component<AppProps, AppState> {
    constructor(props: AppProps) {
        super(props);
    }

    render() {
        return (
            <div>
                <h1>Hello, {this.props.name}! (#{this.props.id})</h1>
                {/* In the below, syncItem should take the new name, a detail… Also ID could be provided in `mapStateToProps` by using `ownProps`! */}
                Rename: <input value={this.state.temp} onChange={event => this.setState({ temp: event.target.value })} />
                <button onClick={_ => this.props.syncItem(this.props.id)}>Sync</button>
            </div>
        );
    }
}

function mapStateToProps(state: ReduxState, ownProps?: AppProps): AppData {
    return {
        isSelected: ownProps.id === state.selectedId,
        isInEditMode: state.isInEditMode
    };
}

function mapDispatchToProps(dispatch: Redux.Dispatch<ReduxState>, ownProps?: AppProps): AppActions {
    return {
        syncItem: (id: number) => dispatch(syncItem(id)),
        displayAlert: (text: string) => dispatch(displayAlert(text, ownProps.name))
    };
}

function mapDispatchToPropsAlt(dispatch: Redux.Dispatch<ReduxState>, ownProps?: AppProps): AppActions {
    return {
        syncItem,
        // Making this `null` because `displayAlert` above changes the signature by hiding the other parametr and taking it from `ownProps` - uncommon!
        displayAlert: null
    };
}

function Test() {
    // Only `id` and `name` is correctly required.
    return <App id={0} name={'test'} />;
}

import*as React from'React'；
从“Redux”导入*作为Redux；
从'react redux'导入{connect}；
从“./types”导入{ReduxState}；
从“/actionCreators”导入{syncItem，displayAlert}；
从“/actions”导入{SyncItemAction，DisplayAlertAction}；
//使用'connect'和'mapStateToProps'从Redux获得的道具`
类型AppData={
选择：布尔；
isInEditMode：布尔型；
};
//来自`./actionCreators`的操作创建者都使用'connect'和'mapDispatchToProps'包装在'dispatch'中`
类型AppActions={
syncItem：（id:number）=>SyncItemAction；
displayAlert：（文本：字符串）=>DisplayAlertAction；
};
//类型系统将需要的实际JSX属性。
类型AppProps={
id：编号；
名称：字符串；
}&部分，但此答案也不回答如何键入
状态。
此答案不使用注释（并且使用接口而不是类型）。基本思想是将连接的组件及其支柱与底层组件完全分离（打字）

创建一个类
ConnectedAppProps
，它是要向提供程序公开的连接组件的属性

interface ConnectedAppProps {
    id: number;
    name: string;
}

从该接口扩展AppProps

interface AppProps extends ConnectedAppProps, AppData, AppActions {
}

创建ConnectedComponent

const ConnectedApp: React.ComponentClass<ConnectedAppProps> = 
    connect<AppData,AppActions,AppProps>( mapStateToProps, mapDispatchToProps )( App )

使用
mapStateToProp
和
mapDispatchToProps
作为您今天点播的内容，从
ConnectedAppProps的组件中“丰富”组件
AppProps

const ConnectedApp: React.ComponentClass<ConnectedAppProps> = 
    connect<AppData,AppActions,AppProps>( mapStateToProps, mapDispatchToProps )( App )

   <Provider store={store}>
       <ConnectedApp id={0} name={'test'} />
   </Provider>