如何在MobX State Tree模型中使用TypeScript类型作为属性类型

MobX State Tree（MST）依赖运行时类型定义来完成数据校验、序列化等核心工作，而TypeScript类型仅作为编译时的类型提示，无法直接写入MST模型的属性定义中。你需要把TypeScript类型转换成对应的MST类型描述器，具体操作如下：

1. 将TypeScript类型转为MST模型节点 #

先针对你的AssignedFilter类型，定义匹配的MST模型：

// 创建与AssignedFilter类型对应的MST模型
const AssignedFilterModel = types.model('AssignedFilter', {
  id: types.number,
  name: types.string,
  email: types.string
})

// 可选：从MST模型导出TypeScript类型，方便后续复用
type AssignedFilter = typeof AssignedFilterModel.Type

2. 在SearchStore中使用该MST模型 #

根据assigned字段的可选性，选择对应的MST类型包装器：

const SearchStore = types
  .model('Search', {
    text: types.string, // 推荐显式用types.string替代直接写''，类型定义更清晰
    // 情况1：字段可选（允许为undefined/null）
    assigned: types.maybe(AssignedFilterModel),
    // 情况2：字段必填但有默认值
    // assigned: types.optional(AssignedFilterModel, { id: 0, name: '', email: '' })
    // 情况3：字段必填且需手动初始化（无默认值）
    // assigned: AssignedFilterModel
  })

补充说明 #

如果你的TypeScript类型是GraphQL代码生成器自动生成的，还可以这样优化：

• 手动对照生成的类型编写MST模型，确保字段类型匹配（比如GraphQL的Int对应types.number，String对应types.string）
• 使用mst-gql这类工具，直接根据GraphQL Schema自动生成对应的MST模型，省去手动转换的工作量

内容的提问来源于stack exchange，提问作者Yassir Hartani