React元素相关

React元素相关的类型主要包括ReactNode、ReactElement、JSX.Element。

• ReactNode。表示任意类型的React节点，这是个联合类型，包含情况众多；
• ReactElement/JSX。从使用表现上来看，可以认为这两者是一致的，属于ReactNode的子集，表示“原生的DOM组件”或“自定义组件的执行结果”。

const MyComp: React.FC<{ title: string; }> = ({title}) => <h2>{title}</h2>;

// ReactNode
const a: React.ReactNode =
  null ||
  undefined || <div>hello</div> || <MyComp title="world" /> ||
  "abc" ||
  123 ||
  true;

// ReactElement和JSX.Element
const b: React.ReactElement = <div>hello world</div> || <MyComp title="good" />;

const c: JSX.Element = <MyComp title="good" /> || <div>hello world</div>;

原生DOM相关

原生的 DOM 相关的类型，主要有以下这么几个：Element、 HTMLElement、HTMLxxxElment。

简单来说： Element = HTMLElement + SVGElement。

SVGElement一般开发比较少用到，而HTMLElement却非常常见，它的子类型包括HTMLDivElement、HTMLInputElement、HTMLSpanElement等等。

因此我们可以得知，其关系为：Element > HTMLElement > HTMLxxxElement，原则上是尽量写详细。

React合成事件相关

在 React 中，原生事件被处理成了React 事件，其内部是通过事件委托来优化内存，减少DOM事件绑定的。言归正传，React 事件的通用格式为[xxx]Event，常见的有MouseEvent、ChangeEvent、TouchEvent，是一个泛型类型，泛型变量为触发该事件的 DOM 元素类型。

示例如下：

// input输入框输入文字
const handleInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
  console.log(evt);
};

// button按钮点击
const handleButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
  console.log(evt);
};

// 移动端触摸div
const handleDivTouch = (evt: React.TouchEvent<HTMLDivElement>) => {
  console.log(evt);
};
复制代码

与hooks的结合

在hooks中，并非全部钩子都与TS有强关联，比如useEffect就不依赖TS做类型定义，我们挑选比较常见的几个和TS强关联的钩子来看看。

useState