Реагируйте на машинописную работу с несколькими интерфейсами

Question

Я пытаюсь работать с машинописью.

Я пробовал следующее:

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

Но работает только с этим:

const PanelView: any = PanelMenuView;

Я создал интерфейс для PanelMen u с именем IPanelMenuPropsController и интерфейс с именем 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);

Answer 1

PanelMenuView - это React Component, где IPanel описывает Props, который использует реагирующий компонент.

В идеале при импорте PanelMenuView из '../View' уже будут иметь типы.

Вам нужно будет украсить компонент React этими реквизитами следующим образом.

const PanelView: React.FC<IPanel> = PanelMenuView;