MobX-State-Tree 中的类型化通用操作

如何解决MobX-State-Tree 中的类型化通用操作

您可以在 actions 的帮助下修改 MobX-state-tree 节点。这通常很好，但如果您要设置许多不同的属性，则它会变得很麻烦，例如如果你有一个代表表单的模型。

有没有办法编写一个通用操作，将属性名称和值作为参数，并将属性设置为节点上的值，同时仍然让 TypeScript 验证参数是否有效？

示例

import { types } from "mobx-state-tree";

const FormModel = types
  .model({
    email: "",password: "",username: ""
  })
  .actions((self) => ({
    // This becomes cumbersome as the model grows
    setEmail(email: string) {
      self.email = email;
    },setPassword(password: string) {
      self.password = password;
    },setUsername(username: string) {
      self.username = username;
    }
  }));

解决方法

As outlined by pixelkritzel in his great blogpost 我们可以在两个泛型类型和 cast 的帮助下创建泛型操作。

示例

import { cast,SnapshotIn,types } from "mobx-state-tree";

const FormModel = types
  .model({
    email: "",password: "",username: ""
  })
  .actions((self) => ({
    set<
      K extends keyof SnapshotIn<typeof self>,T extends SnapshotIn<typeof self>
    >(key: K,value: T[K]) {
      self[key] = cast(value);
    }
  }));

const formModel = FormModel.create();

// Works!
formModel.set("email","foo@bar.com");
// TypeScript gives us an error!
formModel.set("firstName","baz");