今天写 demo 的时候 写到 computed 我的想法是 modalFormRules 的 key 值都必须来源于 UserModalForm
如下图所示：

type FormRule<T> = {
  [key in keyof T]: FormItemRule | Array<FormItemRule> | FormRules
}

interface UserModalForm {
  id?: number
  username: string
  sex?: number
  nick_name?: string
  phone?: string
  status: number
  email?: string
  roles?: number[]
}

const modalFormRules = computed<FormRule<UserModalForm>>(() => ({
  username: {
    required: true,
    message: 'Please enter a username',
    trigger: ['input'],
  },
  status: {
    required: true,
    message: 'Please select a status',
    trigger: ['blur', 'change'],
  },
  aaa: {
    required: true,
    message: 'Please enter aaaa',
    trigger: ['input'],
  },
}));

这时候是 TS 是不会报错的 ,一直在想为啥不能报错呢
换个写法试试：

const modalFormRules = computed(() => {
  const rules:FormRule<UserModalForm> = {
  username: {
    required: true,
    message: 'Please enter a username',
    trigger: ['input'],
  },
  status: {
    required: true,
    message: 'Please select a status',
    trigger: ['blur', 'change'],
  },
  aaa: {
    required: true,
    message: 'Please enter aaaa',
    trigger: ['input'],
  }}
  return rules
}))

这样写 虽然 ts 报错 aaa 不存在于 UserModalForm 中 感觉不够优雅
查阅了很久的资料都没有说这个问题

最后

再次找了找网上的别人说的大致的内容如下：

computed<FormRule<UserModalForm>> 中添加 aaa 字段时，
TypeScript 可能不会直接在 computed 函数内部强制执行严格的类型检查。
这是因为 TypeScript 在处理 computed 函数时，可能没有深入推断对象的类型。

结局方案如下：

const modalFormRules = computed((): Readonly<FormRule<UserModalForm>> => ({
  username: {
    required: true,
    message: '请输入用户名',
    trigger: ['input'],
  },
  status: {
    required: true,
    message: '请选择状态',
    trigger: ['blur', 'change'],
  },
  // 下面这一行会因为 'aaa' 不是 UserModalForm 的一部分而报错
  // aaa: {
  //   required: true,
  //   message: '请输入aaa',
  //   trigger: ['input'],
  // },
}));