如何创建与带可选字段的TypeScript User接口兼容的MobX-State-Tree模型？

问题背景 #

在包含FE（React+MobX-State-Tree）、BE（NestJS）和shared-types的单仓库（monorepo）中，shared-types定义了带可选字段的User接口：

// shared-types包
interface User {
  firstName?: string;
  lastName?: string;
  email: string;
}

FE端基于该接口创建的MobX-State-Tree模型在赋值后端返回的User对象时，触发TypeScript错误：Type 'User' is not assignable to type ...。原因是MST生成的实例类型中，firstName和lastName被标记为必填的string类型，与共享接口的可选字段不匹配。

核心原因 #

MobX-State-Tree的types.maybe(types.string)生成的实例类型为string | null，而共享User接口的可选字段是string | undefined，二者类型不匹配；同时直接将普通JS对象（后端返回的User）赋值给MST状态树节点也不符合MST的使用规范。

解决方案 #

方案1：调整MST模型，使用types.optional匹配可选字段类型 #

将types.maybe替换为types.optional并设置默认值为undefined，让MST生成的实例类型与共享User接口完全对齐：

// FE端UserModel
import { types } from "mobx-state-tree";
import { User } from "@your-monorepo/shared-types";

export const UserModel = types.model('User', {
  // types.optional允许字段为undefined，默认值设为undefined匹配接口的可选属性
  firstName: types.optional(types.string, undefined),
  lastName: types.optional(types.string, undefined),
  email: types.string,
});

// 此时生成的Instance类型与User接口完全兼容
export type TUser = Instance<typeof UserModel>;

方案2：修正AuthModel的赋值逻辑，使用create方法生成MST实例 #

MST的状态树节点不能直接赋值普通JS对象，必须通过模型的create方法生成合法的实例后再赋值：

export const AuthModel = types
  .model('Auth', {
    isAuthenticated: false,
    // 使用types.maybe允许user为undefined，匹配未登录状态
    user: types.maybe(UserModel),
  })
  .actions(self => ({
    login: flow(function* (authData: AuthData) {
      const res = yield axios.post('/auth/login', authData);

      if (res.status === 201) {
        const user = res.data as User;

        if (user) {
          self.isAuthenticated = true;
          // 用UserModel.create将普通User对象转为MST实例
          self.user = UserModel.create(user);
          return user;
        }
      }

      return undefined;
    }),
    setUser(user: User | undefined) {
      // 同样处理setUser方法的赋值逻辑
      self.user = user ? UserModel.create(user) : undefined;
    }
  }));

额外优化：确保AuthModel初始状态合理 #

将AuthModel中的user字段改为types.maybe(UserModel)，允许其初始值为undefined，与isAuthenticated: false的初始状态保持一致，避免强制初始化不必要的User实例。

内容的提问来源于stack exchange，提问作者Denis Tambovchanin