关于程序员:TSReact类型化EventHandler

焦虑可分为 有用焦虑 和无用焦虑 两种。

1. 有用焦虑指向当初
2. 无用焦虑指向将来，它的实质，是对当初失控的恐怖

大家好，我是 柒八九。

明天还是 –TypeScript 实战系列 的文章。后面的文章中，咱们从不同的角度介绍了，TS是如何联合 React 进行我的项目开发的。相干文章如下。

• TS_React: 应用泛型来改善类型
• TS_React:Hook 类型化

而明天咱们次要是讲如何利用 TS 对React中的 事件回调 进行类型化解决。

好了，天不早了。咱们开始 粗发。

1. 示例代码

这是一个非常简单的 React 利用，有一个 input 和一个 button。咱们用这个例子来一步步解决，如何用TS 解决外面的事件回调。

import {useState} from 'react';

export default function App() {const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {setInputValue(event.target.value);
  };

  const handleClick = (event) => {console.log('提交被触发');
  };

  return (
    <div className="App">
      <h1> 前端柒八九 </h1>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleClick}> 提交 </button>
    </div>
  );
}

2. 增加 TS

有几种办法来类型化上述代码中的回调函数，咱们将看到 3 种次要的办法。

1. 类型化 事件处理程序的参数
2. 类型化 事件处理程序自身
3. 依附 类型推断

类型化事件处理程序的参数（event）

先解决 onClick 事件。React 提供了一个 MouseEvent 类型，能够间接应用!

import { 
    useState, 
+   MouseEvent,
} from 'react';

export default function App() {
    
  // 省略局部代码
  
+  const handleClick = (event: MouseEvent) => {console.log('提交被触发');
  };

  return (
    <div className="App">
      <h1> 前端柒八九 </h1>
      
      <button onClick={handleClick}> 提交 </button>
    </div>
  );
}

onClick 事件实际上是由 React 保护的：它是一个 合成事件 。
合成事件是 React 对浏览器事件的一种包装，以便不同的浏览器，都有雷同的 API。

handleInputChange函数与 handleClick 十分类似，但有一个显著的区别。不同的是，ChangeEvent 是一个 泛型 ，你 必须提供什么样的 DOM 元素正在被应用。

import { 
    useState, 
+   ChangeEvent
} from 'react';

export default function App() {const [inputValue, setInputValue] = useState('');

+ const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {setInputValue(event.target.value);
  };

  // 省略局部代码

  return (
    <div className="App">
      <h1> 前端柒八九 </h1>
      <input value={inputValue} onChange={handleInputChange} />
      
    </div>
  );
}

在下面的代码中须要留神的一点是，HTMLInputElement 特指 HTML 的输出标签。如果咱们应用的是 textarea，咱们将应用 HTMLTextAreaElement 来代替。

留神，MouseEvent 也是一个泛型，你能够在 必要时对它进行限度。例如，让咱们把下面的 MouseEvent 限度为专门从一个按钮收回的鼠标事件。

const handleClick = (event: MouseEvent<HTMLButtonElement>) => {console.log('提交被触发');
};

还须要提醒的是，React为咱们提供了很多 Event 对象的类型申明。

Event 事件对象类型

类型化事件处理程序自身

React 申明文件所提供的 EventHandler 类型别名，通过不同事件的 EventHandler 的类型别名来定义事件处理函数的类型, 更不便定义其函数类型。

type EventHandler<E extends SyntheticEvent<any>> = {bivarianceHack(event: E): void

}['bivarianceHack']

bivarianceHack 为事件处理函数的类型定义，函数接管一个 event 对象，并且其类型为接管到的泛型变量 E 的类型, 返回值为 void。

而在类型定义的时候，有一个很怪异的行为['bivarianceHack']。

这与 strictfunctionTypes 下的性能兼容性无关。在此选项下，如果参数是 派生类型，则不能将其传递给将传入基类参数的函数。例如:

class Animal {private x:undefined}
class Dog extends Animal {private d: undefined}

type EventHandler<E extends Animal> = (event: E) => void

let o: EventHandler<Animal> = (o: Dog) => {} // 在 strictFunctionTypes 模式下，失败

此时，TS会报正告。

所以 hack 的作用是即便在 strictFunctionTypes启用的状况下容许 EventHandler 的二元行为。因为事件处理程序的签名将在办法申明中有其起源，因而它不会受到更严格的函数查看。

type BivariantEventHandler<E extends Animal> = {bivarianceHack(event: E): void }["bivarianceHack"];
// 在 strictFunctionTypes 模式下，失效
let o2: BivariantEventHandler<Animal> = (o: Dog) => { } 

讲的有点多，咱们还是绕回本文的重点。应用 EventHandler 来对下面的例子进行革新解决。

import { 
   useState, 
+  ChangeEventHandler, 
+  MouseEventHandler 
} from 'react';

export default function App() {const [inputValue, setInputValue] = useState('');

 
+ const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) =>{setInputValue(event.target.value);
  };

+  const handleClick: MouseEventHandler = (event) => {console.log('提交被触发');
  };

  return (// ... 省略....);
}

系不系，很简略。

依赖类型推断

你也能够依附 类型推断 ，而不须要本人处理函数。然而，你须要 将回调函数内联解决。

import {useState} from 'react';

export default function App() {const [inputValue, setInputValue] = useState('');

  return (
    <div className="App">
      <h1> 前端柒八九 </h1>
      <input 
        value={inputValue} 
+        onChange={(event) => setInputValue(event.target.value)}
      />
      <button 
+        onClick={(event) => console.log('提交被触发')}
      >
        提交
      </button>
    </div>
  );
}

这个更简略

后记

分享是一种态度。

参考资料：

• React_Ts_类型化 event
• TypeScript 类型中 bivarianceHack 的目标是什么？
• TS 官网

全文完，既然看到这里了，如果感觉不错，顺手点个赞和“在看”吧。

本文由 mdnice 多平台公布