将javascript关联数组转换为打字稿

Question

在我们的一个系统中，我们有很多与 UI 相关的 javascript 来处理菜单操作，如下所示

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
    }

}

这与switch/if 一起使用，例如 if(menuAction[actionName] === "edit profile")... 然后调用menuActions[actionName].Action()。

我们现在正在将系统转换为 TypeScript，这对我们来说是全新的，我一直在思考如何最好地重新组织和转换这段特定的代码。

我现在不喜欢用 javascript 完成它的方式，所以如果可能的话，我想借此机会在转换为 typescript 的同时将其更改为更好的东西。

我的直觉说我应该从一个类中收集MenuAction 实例，但我不确定如何实现它然后使用它。

我应该完全不使用类，而只使用数组中的普通对象吗？

（知道这是 Angular 1.X 视图控制器的代码可能会有所帮助。

Answer 1

就打字而言，这是您可以做到的一种方式：

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

是否使用类实例由您决定，TS 对这样的设计选择完全不可知。

...如果您希望该类型可用于implement 的类，则必须将其定义为接口。自定义类型 (type alias) 和接口之间真的没有其他区别。

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

Answer 2

这样的事情怎么样：

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)