23、TypeScript 在 React 中的高级应用：类型控制与组件优化

TypeScript 在 React 中的高级应用：类型控制与组件优化

1. 输入组件的类型控制

在 React 开发中，输入组件的类型控制至关重要。我们可以通过定义不同的类型来区分受控和非受控组件。

1.1 受控组件

受控组件要求 value 和 onChange 是必需的，同时移除 defaultValue 。以下是相关代码：

// Branch 1: Make "value" and "onChange" required, drop `defaultValue`
type ControlledProps = OnlyRequired<
  JSX.IntrinsicElements["input"],
  "value" | "onChange"
> & {
  defaultValue?: never;
};

1.2 非受控组件

非受控组件则移除 value 和 onChange ，并使 defaultValue 成为必需。代码如下：

// Branch 2: Drop `value` and `onChange`, make `defaultValue` required
type UncontrolledProps = Omit