携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 9 天，点击查看活动详情
大家好，我是爱吃鱼的桶哥Z。在当下的大趋势下，使用TS + React/Vue 已经算是前端开发的标配了，但由于很多人对一些基础类型的不确定性，导致在实际开发中经常会使用any来解决问题，今天我们就一起来看一下平常开发中那些被我们忽略掉的基础类型有哪些！
表单事件类型
做2b的童靴们应该都比较清楚，B端最常用的功能莫过于表单和表格，而表单的很多基础类型如果定义好了，再开发中能给与我们最大限度的提示，避免编写一些重复或错误的代码，下面我们一起来看一下表单中常用的基础类型吧！
一般我们使用input标签用于用户数据的录入，主要监听用户输入的变化，用的事件主要是onChange，而onChange中提供的event对象的属性有哪些呢？下面一起来看一下代码：
const [val, setVal] = useState<string>('');
const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
// do some thing
};
const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>): void => {
// do some thing
};
<input value={val} onChange={handleChange} onKeyPress={handleKeyPress} />
event的基础类型在上述的代码中主要是React.ChangeEvent<HTMLInputElement>，当我们定义了这个基础类型后，我们直接使用event.target.value时，就会有相关的提示信息，这样能够保证代码的准确性，也能确保event对象中有我们需要的值。
当然除了表单中input的event基础类型，我们还有一些按钮点击时的event类型，它跟input的基础类型又不一样，下面我们一起来看看，代码如下：
const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
// do some thing
};
<button onClick={handleClick}>点击我</button>
例如，当我们点击按钮时需要获取到按钮上的相关属性时，event对象中就包含了这个按钮的相关信息，如果我们没有定义event对象的基础类型，那么我们就无法知道button上有哪些属性，开发的时候就需要到处去查资料，并且代码中还会在event下提示该对象是any类型。
我们在实际的开发中，用到input中event的类型当然不仅仅只有这些，下面列出一些常用的event类型，方便我们日常开发中知道对应的类型该怎么编写，而不是遇到不清楚的就直接上any。
| 事件类型 | 描述 |
|---|---|
| ChangeEvent | 改变input、select 和 textarea 组件的值的类型 |
| DragEvent | 鼠标的拖拽类型 |
| FocusEvent | 当元素获得或失去焦点时发生的事件 |
| FormEvent | 每当表单或表单元素获得/失去焦点时，都会发生事件，更改表单元素值或提交表单。 |
| KeyboardEvent | 键盘的交互事件类型 |
| MouseEvent | 鼠标相关的交互事件类型 |
上表中罗列的都是表单中相关操作的基础类型，并且它们都是泛型，我们还需要指定这个元素的具体类型，例如：React.FormEvent<HTMLInputElement>，这样TS就知道我们操作的这个元素是一个html的input标签，当我们操作的时候就能够获取到input标签上的属性和方法了。
当然仅仅知道这些基础类型还不够，只有在实际开发中多多使用这些基础类型，并且对它们有一定的理解，后续在开发中才能更有效的提高代码的质量和健壮性。
其它基础类型
除了表单的基础类型外，我们还会用到一些其它的基础类型，例如React中Children的类型是Reach.ReactNode，这些都是React本身已经给我们提供好的基础类型，我们只需要在开发的过程中填写对应的基础类型，编辑器就能正确的识别，并且给予我们最完美的提示信息。
最后
网上有很多关于 TypeScript + React 的最佳实践方案，但是只有选择最适合自己公司业务的那套方案，可能才是真正的最佳实践吧。当然，我们在日常不断的开发过程中也会总结一些最佳实践的方案，这也能为后续的开发沉淀更多更优的解决方案。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家。
