React typescript work with multiple Interfaces

Question

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

What do you mean "doesn't work"? Give a minimal reproducible example. — jonrsharpe
– jonrsharpe, Commented Apr 18, 2020 at 12:38
I use my custom interface const PanelView: IPanelMenuPropsView = PanelMenuView; and shows me next: Type 'typeof PanelMenuView' is missing the following properties from type 'IPanelMenuPropsView': savedMap, selectedTab, nameMap, error, and 13 more. — Javier
– Javier, Commented Apr 18, 2020 at 12:52
So edit the question to include a minimal reproducible example. You don't even show the definition of PanelMenuView, most of the code you've shown is irrelevant. — jonrsharpe
– jonrsharpe, Commented Apr 18, 2020 at 12:53

Ed Knowles · Accepted Answer · 2020-04-18 13:06:34Z

1

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;

answered Apr 18, 2020 at 13:06

Ed Knowles

1,9251 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React typescript work with multiple Interfaces

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related