标准答案
- 基础 props 应明确必填、可选、默认值和 children 类型，不要全部写成 any 或宽泛 object。
- 事件回调要写清参数，例如 onChange(value)、onSubmit(form)、onOpenChange(open)。
- 受控组件要明确 value/onChange，非受控组件要明确 defaultValue，不要让两套模式随意混用。
- 互斥 props 可以用联合类型表达，例如 href 和 onClick 二选一、value 和 defaultValue 二选一。
- 封装原生元素时可以继承 ComponentPropsWithoutRef，但要谨慎覆盖冲突字段。
题目解析
这道题的重点是组件 API 设计，而不是只会写 type Props。
类型越准确，调用方越容易在编辑器里发现错误。组件库尤其需要把 props、事件和 ref 类型设计清楚。
不要把复杂业务模型完整暴露给展示组件。展示组件更适合接收自己真正需要的字段。
代码示例
下面用联合类型表达受控和非受控输入不能混用。
TSX
type ControlledProps = {
value: string
onChange: (value: string) => void
defaultValue?: never
}
type UncontrolledProps = {
defaultValue?: string
value?: never
onChange?: (value: string) => void
}
type TextInputProps = {
label: string
} & (ControlledProps | UncontrolledProps)常见误区
- props 全部用 any，调用方没有类型保护。
- 受控和非受控 props 同时开放，但没有类型约束，运行时状态混乱。
- 直接把后端 DTO 当组件 props，导致组件和接口结构强耦合。