24、TypeScript 在 React 和类编程中的应用与实践

TypeScript 在 React 和类编程中的应用与实践

1. React 合成事件系统中的回调类型标注

1.1 问题描述

在 React 中，我们希望为所有浏览器事件获取最佳的类型标注，并利用类型系统将回调函数限制在兼容的元素上。

1.2 解决方案

使用 @types/react 中的事件类型，并通过泛型类型参数对组件进行特化。

1.3 详细讨论

1.3.1 避免使用原生事件

Web 应用通过用户交互变得生动，每次用户交互都会触发一个事件。TypeScript 的 React 类型对事件有很好的支持，但要求我们不使用 lib.dom.d.ts 中的原生事件，否则 React 会抛出错误。例如：

type WithChildren<T = {}> = T & { children?: React.ReactNode };
type ButtonProps = {
  onClick: (event: MouseEvent) => void;
} & WithChildren;
function Button({ onClick, children }: ButtonProps) {
  return <button onClick={onClick}>{children}</button>;
  //               ^
  // Type '(event: Mou