Question

我使用React.js和Typescript，在React.js商店中我存储了Javascript对象。有时它们是由服务器发送的，因此它们只是对象，它们没有成员函数。但我想要成员函数，所以不要这样：

// Interface and "external" member function for an object in the store:
interface User {    
  id: UserId;
  isAdmin?: boolean;
  isModerator?: boolean;
  ...
}

function isStaff(user: User) {
  return user.isAdmin || user.isModerator;
}

if (isStaff(user)) {
  showPowerOffDataCenterButton();
}

我可以这样做：

if (user.isStaff()) {
  ...

是否有任何React或Javascript功能或Typescript语法 - 魔法可以将成员函数添加到React商店数据结构？请注意，对象有时从服务器发送为JSON并使用JSON.parse(..)进行解析，因此我不认为我可以声明自己的Javascript类并将函数添加到.prototype字段中（因为我无法控制对象的创建。

（我计划稍后使用Redux +一些不可变的JS库，以防万一）

或者如果不可能，还有任何解决方法吗？

Answer 1

您可以创建一个包含该信息的类，而不是将它们放在单独的函数中。

interface UserInfo {
    id: string;
    isAdmin?: boolean;
    isModerator?: boolean;
}
class User {
    constructor(private user: UserInfo) { }

    public isStaff(): boolean {
        return this.user.isAdmin || this.user.isModerator;
    }
}

let user: User = new User({ id: "wqe" });
console.log(user.isStaff());

您还可以为属性制作getter和setter，这样就不会失去表现力。

class User {
    constructor(private user: UserInfo) { }

    public isStaff(): boolean {
        return this.user.isAdmin || this.user.isModerator;
    }

    public get isAdmin() {
        return this.user.isAdmin;
    }

    public set isAdmin(value) {
        this.user.isAdmin = value;
    }
}

然后，您可以像在普通对象上一样获取或设置isAdmin。

user.isAdmin = false;

您还可以强制执行 isAdmin 无法通过不为其设置setter来设置。所以用户类是不可变的。

使用成员函数扩展React.js存储数据结构？

1 个答案: