How to type a function in TypeScript

Question

I have a list of objects with each an action field, I want to simplify this field of:

    {
        id: '2',
        label: '',
        text: () => translate('MapAnnotation.Circle'),
        icon: 'circle',
        action: () => {
            optionsActionConstructor(MenuType.DRAW, GeometryType.CIRCLE);
        },
    }

to:

    {
        id: '2',
        label: '',
        text: () => translate('MapAnnotation.Circle'),
        icon: 'circle',
        action: optionsActionConstructor(MenuType.DRAW, GeometryType.CIRCLE);

    }

So I did this :

type ActionType = (type?: MenuType, tool?: DrawGeometryType | OtherToolsType) => any;

export interface OptionsButtons {
    id: string;
    label: string;
    text: () => string;
    icon: AvailableIcons;
    action: ActionType;
}

const optionsActionConstructor = (
    type: MenuType.DRAW,
    tool: DrawGeometryType | OtherToolsType,
): void => {
    openedLeftMenuVar({ type, tool });
    if (isAOtherToolsType(tool)) {
        mapAnnotationsModalStatusVar({
            open: true,
            category: tool,
            annotation: null,
        });
    }
    if (isAGeometryType(tool)) {
        drawAnnotationVar({
            isActive: true,
            geometryType: tool,
        });
    }
};

It makes more sense to execute the function directly rather than going through an intermediate annotated function. But typescript doesn’t think like me and signals me :

Type 'void' is not assignable to type 'ActionType' OptionsMenu.types.ts(10, 5): The expected type comes from property 'action' which is declared here on type 'OptionsButtons'

Does anyone have a solution, please ? :/

I seems that you declare action to be a function returning something (any) but somewhere you are passing to action a function that returns nothing — Osmanys Fuentes-Lombá
– Osmanys Fuentes-Lombá, Commented Jun 20, 2022 at 15:31
Where is the code for your optionsActionConstructor? Likely it is missing a return type. You probably need something like: optionsActionConstructor(arg1: any, arg2: any): ActionType { } Note the return type at the end of the function definition : ActionType — Devin Michael
– Devin Michael, Commented Jun 20, 2022 at 15:37
Please stop posting code as images. Please take a read of this meta post to get a feeling of why this is bad practice. — spender
– spender, Commented Jun 20, 2022 at 17:01
Please provide a self-contained minimal reproducible example that clearly demonstrates the issue you are facing, as plain text in the body of your post ( please replace/supplement images of code/errors with plaintext versions ). Ideally I could paste such code into a standalone IDE and immediately get to work solving the problem without first needing to re-create it. So there should be no pseudocode, typos, unrelated errors, or undeclared types or values. — jcalz
– jcalz, Commented Jun 20, 2022 at 18:06

Kiritushka · Accepted Answer · 2022-06-20 18:50:24Z

You need to properly type the function

type ActionType = (type?: MenuType, tool?: DrawGeometryType | OtherToolsType) => void;

const optionsActionConstructor: ActionType = (type, tool) => {
    openedLeftMenuVar({ type, tool });
    if (isAOtherToolsType(tool)) {
        mapAnnotationsModalStatusVar({
            open: true,
            category: tool,
            annotation: null,
        });
    }
    if (isAGeometryType(tool)) {
        drawAnnotationVar({
            isActive: true,
            geometryType: tool,
        });
    }
};

const item = {
    id: '2',
    label: '',
    text: () => translate('MapAnnotation.Circle'),
    icon: 'circle',
    action: () => optionsActionConstructor(MenuType.DRAW, GeometryType.CIRCLE);
    // the action field should contain a function, not a value. Moreover, the optionsActionConstructor function does not return anything.
}

Collectives™ on Stack Overflow

How to type a function in TypeScript

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