You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

TypeScript含undefined的Record类型需严格定义字段?表单错误类型优化

表单错误对象的TypeScript类型定义方案

首先是原有的表单值类型定义:

interface FormValues {
  name: string
  description: string
  expirationDate: Date | null
}

之前用Record<keyof FormValues, string | undefined>定义错误对象时,必须显式声明所有字段(哪怕值是undefined),空对象会触发TypeScript错误。要实现**仅包含存在错误的字段(字段值为string或不存在)**的需求,有两种简洁的类型定义方案:

方案1:使用Partial结合Record

直接通过Partial将Record的所有字段转为可选属性:

type FormErrors = Partial<Record<keyof FormValues, string>>

方案2:直接定义可选属性的接口

如果更倾向于直观的接口写法,也可以手动定义每个字段为可选:

interface FormErrors {
  name?: string
  description?: string
  expirationDate?: string
}

两种方案效果一致,都允许错误对象只包含有错误的字段,空对象{}也完全符合类型要求。修改后的validate函数示例:

const validate = (values: FormValues) => {
  const errors: FormErrors = {}
  if (!values.name) errors.name = 'Required'
  if (!values.description) errors.description = 'Required'
  if (!values.expirationDate) errors.expirationDate = 'Required'
  return errors
}

内容的提问来源于stack exchange,提问作者Umer

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.02 01:46:18