Semi-Design时间选择器组件类型扩展：支持undefined值类型

在Semi-Design组件库中，TimePicker时间选择器组件是一个常用的表单控件，它允许用户选择或输入时间。在实际开发中，我们经常会遇到需要处理时间范围选择的场景，这时就会用到type='timeRange'属性。

问题背景

当开发者使用TimePicker组件的时间范围选择功能时，可能会遇到一个类型定义上的限制。当前组件的类型定义不允许value属性中包含undefined值。这在用户交互过程中会产生问题，因为：

1. 用户选择时间范围时，通常先选开始时间，再选结束时间
2. 在只选择了开始时间但尚未选择结束时间的中间状态，结束时间应该是undefined
3. 当前类型定义强制要求两个时间都必须有值，这与实际交互流程不符

技术分析

TimePicker组件的value属性当前定义为[BaseValueType, BaseValueType]，其中BaseValueType不允许包含undefined。这种类型定义虽然可以保证类型安全，但忽略了实际业务场景中的中间状态。

在React受控组件的设计中，组件的value应该能够反映所有可能的交互状态。对于时间范围选择器来说，这些状态包括：

1. 完全未选择状态（[undefined, undefined]）
2. 只选择了开始时间（[Date, undefined]）
3. 只选择了结束时间（[undefined, Date]）
4. 完整选择了时间范围（[Date, Date]）

解决方案

Semi-Design团队在2.52.0版本中修复了这个问题，主要变更包括：

1. 扩展了TimePicker组件的类型定义，允许value属性中包含undefined
2. 确保组件能够正确处理undefined值，不会显示异常或报错
3. 保持了向后兼容性，原有代码无需修改仍可正常工作

实际应用

开发者现在可以这样使用TimePicker组件：

<TimePicker 
  type='timeRange' 
  value={[new Date(), undefined]}
  onChange={(value) => {
    // value可能是[Date, undefined]或[undefined, Date]等组合
    console.log(value);
  }}
/>

这种改进使得组件能够更自然地反映用户交互过程中的中间状态，提高了开发体验和用户体验。

总结

Semi-Design团队对TimePicker组件的这一改进，体现了对开发者实际需求的关注。通过允许undefined值类型，组件现在能够更好地支持时间范围选择的完整交互流程，包括各种中间状态。这种类型的细化和完善，是UI组件库成熟度的重要标志，也是提升开发者体验的关键细节。