TypeScript：Vue中非必填值的类型断言处理方式咨询

你的处理方式是否正确？ #

这种处理方式是完全正确的。将非必填字段默认设为undefined，提交前过滤掉值为undefined的字段，符合后端API对非必填字段的常见要求——只传递有值的字段，避免冗余数据。

不过要注意你的代码存在语法错误，每个属性末尾需要添加逗号：

const payload = reactive({
  name: '',
  religion: undefined as string | undefined,
  gender: undefined as string | undefined
})

更优的处理方案 #

方案1：封装通用过滤函数 #

可以写一个复用性强的工具函数，统一处理所有需要过滤空值的提交场景：

function filterUndefinedFields<T extends object>(obj: T): Partial<T> {
  return Object.fromEntries(
    Object.entries(obj).filter(([_, value]) => value !== undefined)
  ) as Partial<T>
}

// 提交时调用
axios.post('/api/xxx', filterUndefinedFields(payload))

这个函数会自动剔除对象中所有值为undefined的属性，不用每次提交都重复写过滤逻辑。

方案2：手动组装提交数据 #

如果字段数量不多，也可以在提交时直接判断字段值，按需组装数据：

// 提交时组装参数
const submitData = {
  name: payload.name,
  ...(payload.religion && { religion: payload.religion }),
  ...(payload.gender && { gender: payload.gender })
}

axios.post('/api/xxx', submitData)

这种方式逻辑直观，能清晰控制每个字段是否被包含，但字段较多时代码会稍显繁琐。

方案3：结合toRaw处理响应式对象 #

如果payload是通过reactive创建的响应式对象，提交前可以用toRaw获取原始对象再过滤，避免响应式代理可能带来的潜在问题：

import { toRaw } from 'vue'

const rawPayload = toRaw(payload)
const filteredData = filterUndefinedFields(rawPayload)
axios.post('/api/xxx', filteredData)

内容的提问来源于stack exchange，提问作者Nick Davies