Converting javascript associative array to typescript

Question

In one of our systems, we have a lot of UI related javascript that handles menu actions and that look like below

var menuActions = {
    "edit-profile": {
        Title: "rs_edit_profile",
        Action: function(callback){
            //some logic here to handle the UI
        },
        HasPermission: true
    },
    "delete-profile": {
        Title: "rs_edit_profile",
        Action: function(callback){
            //some logic here to handle the UI
        },
        HasPermission: true
    },
    "create-profile": {
        Title: "rs_edit_profile",
        Action: function(callback){
            //some logic here to handle the UI
        },
        HasPermission: false
    }

}

and that is used with switch/if cases like if(menuAction[actionName] === "edit profile")... which then calls the menuActions[actionName].Action().

We're converting the system to TypeScript right now, which is all new for us, and I'm stuck on how I best should re-organize and convert this specific piece of code.

I don't like how it's done with javascript right now, so if possible, I would like to take the opportunity to change it to something better while doing the conversion to typescript.

My intuition says I should have a collection of MenuAction instances from a class, but I'm not sure as to how I would implement that and then use it.

Should I completely omit the use of a class and instead just use normal objects in an array?

(It might help to know that this is code for an Angular 1.X view controller).

I know I asked about this in my answer, but as it stands, your example is not valid javascript. It looks like an associative array, but those are implemented by basic objects, not arrays. Consider editing your example (and maybe updating title) so that your js is valid. — Alex
– Alex, Commented Oct 16, 2016 at 20:09

Alex · Accepted Answer · 2016-10-16 20:04:55Z

2

Just regarding the typing, this is one way you could do it:

type Action = {
    Title: string;
    Action: (cb: () => void) => void;
    HasPermission: boolean;
}

var menuActions: {[key:string]: Action} = {
    "edit-profile": {
        Title: "rs_edit_profile",
        Action: function (callback) {
            //some logic here to handle the UI
        },
        HasPermission: true
    },
    "delete-profile": {
        Title: "rs_edit_profile",
        Action: function (callback) {
            //some logic here to handle the UI
        },
        HasPermission: true
    },
    "create-profile": {
        Title: "rs_edit_profile",
        Action: function (callback) {
            //some logic here to handle the UI
        },
        HasPermission: false
    }
}

Whether or not to use class instances is up to you, TS is quite agnostic about design choices like that.

... and if you want the type to be usable for classes to implement, you have to define it as an interface instead. It's really no other difference between a custom type (type alias) and an interface.

interface Action {
    Title: string;
    Action: (cb: () => void) => void;
    HasPermission: boolean;
}

edited Oct 16, 2016 at 20:04

answered Oct 16, 2016 at 19:49

Alex

14.6k11 gold badges58 silver badges81 bronze badges

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

4 Comments

Daniel B Over a year ago

I never thought of introducing a new type. This is exactly what I had in mind in the first place but couldn't reach on my own! I will definately try it, thank you!

Alex Over a year ago

@DanielB Oh by the way, you had an array in your example, that didn't fit with your json, so I made your collection an object. Or do you really want an array?

Daniel B Over a year ago

No, this is great!

Daniel B Over a year ago

I ended up using this solution because I could fit it into my specific situations easier than using a class.

Nitzan Tomer · Accepted Answer · 2016-10-16 19:52:54Z

1

How about something like this:

class MenuAction {
    private id: string;
    private title: string;
    private hasPermission: boolean;
    private action: (cb: Function) => void;

    constructor(id: string, title: string, hasPermission: boolean, action: (cb: Function) => void) {
        this.id = id;
        this.title = title;
        this.hasPermission = hasPermission;
        this.action = action;
    }

    get Title() {
        return this.title;
    }

    get HasPermission() {
        return this.hasPermission;
    }

    get Action() {
        return this.action;
    }

    equals(id: string): boolean {
        return this.id === id;
    }
}

const actions = [
    new MenuAction("edit-profile", "rs_edit_profile", true, function(callback) {
        //some logic here to handle the UI
    }),
    new MenuAction("delete-profile", "rs_edit_profile", true, function(callback) {
        //some logic here to handle the UI
    }),
    new MenuAction("create-profile", "rs_edit_profile", false, function(callback) {
        //some logic here to handle the UI
    })
];

function execute(id: string, callback: Function) {
    actions.filter(action => action.equals(id)).forEach(action => {
        action.Action(callback);
    });
}

(code in playground)

answered Oct 16, 2016 at 19:52

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

1 Comment

Daniel B Over a year ago

Clean, simple and fits the purpose. Trying it out first thing in the morning!

Collectives™ on Stack Overflow

Converting javascript associative array to typescript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related