Reactjs React typescript使用多个接口

我在试着用打字脚本

我试过下一步：

const PanelView: IPanel = PanelMenuView;
const PanelView: IPanelMenuPropsView = PanelMenuView;

但仅适用于以下情况：

const PanelView:any=PanelMenuView

我已经创建了一个名为
ipanelmenupropscocontroller
的
PanelMenuControllerState
接口和一个名为
PanelMenuControllerState
的接口。但是我正在尝试呈现一个组件，
PanelView
，它使用一个名为
IPanelMenuPropsView
的自定义接口，并包含以下内容：

export interface IPanelMenuPropsController {
    mapGL: any,
    loadable: boolean,
    setNameMap(name: string): void,
    setTab(tab: string): void,
    selectedTab: string,
    savedMap: boolean,
    nameMap: string,
};

export interface IPanelMenuPropsView {
    savedMap: boolean, 
    selectedTab: string, 
    nameMap: string, 
    error: boolean,
    blocked: boolean, 
    mapGL: any,
    onExit(): any, 
    onSave(): any, 
    onUpdate(): any, 
    onDuplicate(): any, 
    onExport(): any, 
    onSprite(): any, 
    onPlugin(): any, 
    onHelp(): any, 
    onResetMap(): any, 
    onUpdateName(name: string): any, 
    onSelectTab(tab: string): any,
};

为什么在尝试渲染组件时自定义接口不起作用

这是我的密码：

import { IPanelMenuPropsController, PanelMenuControllerState } from "../Interface"; 

import PanelMenuView from "../View";

interface IPanel {
    mapGL: any,
    blocked: boolean,
    selectedTab: string,
    savedMap: boolean,
    nameMap: string,
    error: boolean,
}

const PanelView: IPanel = PanelMenuView;

class PanelMenu extends Component<IPanelMenuPropsController, PanelMenuControllerState> {


    render() {
        const { mapGL, loadable, selectedTab, savedMap, nameMap } = this.props;
        const disableAllOptions = !loadable ? true : false;
        return (
            <PanelView
                mapGL={mapGL}
                blocked={disableAllOptions}
                selectedTab={selectedTab}
                savedMap={savedMap}
                nameMap={nameMap}
                error={false}
            />
        )
    }
}

function selectStateApp(state: any) {
    return {
        selectedTab: state.app.selectedTab,
        savedMap: state.map.savedMap,
        nameMap: state.map.nameMap,
    };
}

export default connect(
    selectStateApp,
    dispatch => ({
        setNameMap: (name: string) => MapActions.setNameMap(name)(dispatch),
        setTab: (tab: string) => AppActions.setTab(tab)(dispatch),
    })
)(PanelMenu);

从“./Interface”导入{ipanelmenupropscocontroller，PanelMenuControllerState}；
从“./视图”导入PanelMenuView；
接口IPanel{
mapGL：任何，
分块：布尔，
selectedTab:字符串，
savedMap:boolean，
nameMap:string，
错误：布尔，
}
const PanelView:IPanel=PanelMenuView；
类PanelMenu扩展组件{
render（）{
const{mapGL，loadable，selectedTab，savedMap，nameMap}=this.props；
常量不允许=！可加载？真：假；
返回(
)
}
}
函数selectStateApp（状态：任意）{
返回{
selectedTab:state.app.selectedTab，
savedMap:state.map.savedMap，
nameMap:state.map.nameMap，
};
}
导出默认连接(
选择StateApp，
分派=>({
setNameMap：（名称：字符串）=>MapActions.setNameMap（名称）（分派），
setTab：（tab:string）=>AppActions.setTab（tab）（dispatch），
})
)（面板菜单）；
PanelMenuView
是一个React组件，其中as
IPanel
描述了React组件使用的道具

理想情况下，您从
“../View”
导入的
PanelMenuView
上已经有了类型

你需要用这些道具来装饰React组件

const PanelView:React.FC=PanelMenuView
你说“不工作”是什么意思？给出一个示例。我使用自定义界面const PanelView:IPanelMenuPropsView=PanelMenuView；下面显示：类型“typeof PanelMenuView”缺少类型“IPanelMenuPropsView”中的以下属性：savedMap、selectedTab、nameMap、error和13个其他属性。因此，问题是包含一个。您甚至没有显示PanelMenuView的定义，您显示的大多数代码都是无关的。