CODEWITHSUNDEEP
reactjstypescript
Javier
Javier

Reputation: 2095

React typescript work with multiple Interfaces

I'm trying to work with typescript.

I've tried next:

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

But only works with this:

const PanelView: any = PanelMenuView;

I've created a Interface to PanelMenu called IPanelMenuPropsControllerand an Interface called PanelMenuControllerState. But I,'m trying to render a component, PanelView, that uses a custom interface called IPanelMenuPropsView and contains this:

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,
};

Why doesn't custom interface work when trying to render a component???

Here is my code:

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);

Upvotes: 0

Views: 1327

Answers (1)

Ed Knowles
Ed Knowles

Reputation: 1925

PanelMenuView is a React Component where as IPanel describes the Props the react component uses.

Ideally your import of PanelMenuView from '../View' will already have types on it.

You will need to decorate the React component with these props like this.

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

Upvotes: 1

Related Questions