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完成的操作，所以如果可能的话，我希望借此机会在转换为打字稿时将其更改为更好的内容。

我的直觉说我应该从一个类中收集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）

将javascript关联数组转换为typescript

2 个答案: