[
](keraito.medium.com/?source=pos…)
6月8日
-
5分钟阅读
[
保存
为React开发者提供的7种Typescript工具类型
提高你每天的开发效率
图片由作者提供
如果没有TypeScript，做React开发几乎是不可想象的。这两种技术已经被确定为一个非常强大的组合，使开发人员能够大规模地创建高质量和可维护的React应用程序。TypeScript在这个过程中扮演着不可或缺的角色。
然而，成为一名优秀的React开发者并不能自动转化为一名优秀的TypeScript开发者。编写高质量的TypeScript代码是一项独立的技能，就像编写高质量的React代码一样。当把这两种技能结合在一起时，这一点就更加突出了。
为了帮助解决这个问题，这篇文章介绍了七种不同的TypeScript实用类型。根据个人经验，这些实用类型对React开发者的日常工作非常有帮助。它们适用于常见的React开发实践或面向React开发。掌握它们将大大提升你作为TypeScript React开发者的素质。
Pick
Pick 实用类型允许你在现有对象类型或接口的基础上构建一个新的对象类型。它接受两个参数：现有的对象类型或接口和一个字符串字面或键的字符串字面的联合，应该包括在结果的对象类型中。
对于React开发者来说，当一个组件的道具与另一个组件或数据类型共享类型时，这特别有用。你可以使用Pick ，而不是在新类型中手动指定所有的类型。这也是在类型之间建立一个明确的联系，并在所有相关的类型中自动对齐类型。
Omit
Omit 工具类型与之前讨论的Pick 工具类型非常相似，但基本上是反过来做的。你不需要指定在构建的对象类型或接口中包括哪些键，而是指定那些应该被排除的键。当你想重用一个现有对象类型的大部分或只想排除其中的一小部分时，这就变得很有用。
就React开发中的用例而言，它们类似于Pick 的用例。想想看，从另一个组件的道具或数据类型中接管类型。然而，微小的区别是，Omit 对于应该被排除而不是包含的条目更加明确。
Partial
Partial 工具类型允许你构建一个新的对象类型，其中原对象类型或接口中的所有属性都被设置为可选。基本上，与原始类型相比，它创建了一个类型的子集。
对于React开发来说，这在为组件提供道具的测试或实用函数中特别有用。在这些场景中，通常不需要一次性提供所有的道具。道具的不同部分可能来自不同的来源或函数，而所有这些都是完整的道具集。
NonNullable
在React中，很多时候你要处理的是一些可选或可忽略的值。考虑到可选的道具，潜在的缺失数据，或过滤缺失的值。在所有这些情况下，TypeScript会让你知道，这些变量也可以是undefined 或null 。
但是在某些情况下，你要向TypeScript指定这是不可能的，或者它们不能是undefined 或null 。想想初始化一个组件的道具，它被标记为可选的，但在使用它的组件中肯定是被设置的。在这些情况下，可以使用NonNullable 实用类型来构造一个没有null 和undefined 的新类型。
React.ComponentProps
有时，你无法访问组件的道具的TypeScript类型，而只能访问组件本身。想想一个来自外部库的组件，或者不希望将组件的道具类型暴露给外界的时候。虽然这是可以理解的，但它使重用或扩展现有类型变得很困难。手动实现它们会引入冗余并增加维护负担。
相反，你可以使用React的ComponentProps 实用类型，在这些情况下获得对组件的道具类型的访问。如其名所示，它接受组件的类型作为其参数，并将用组件的道具类型构建一个新类型。
React.MouseEventHandler
React应用程序的一个组成部分是用户的互动性。实现这一点的一个常见方法是通过事件处理程序，最突出的是鼠标事件。输入这些事件处理程序的困难之处在于，它有多个部分。有整个事件处理程序本身，提供给处理程序的事件，以及一个潜在的返回值。
当在React中开始使用TypeScript时，很想单独输入这些部分。虽然这可以作为一个短期的解决方案，但它不是一个可以扩展到未来的解决方案。相反，你可以利用React的实用类型MouseEventHandler 。它是专门为这些用例制作的，并接受一个目标HTML元素的可选参数。
React.PropsWithChildren
React最伟大的方面之一是它的可组合性，允许组件从外部嵌套到其他组件中。大多数情况下，这是通过React的自然children prop来完成的。
告诉TypeScript一个组件接受children 道具的方法之一是在道具的类型中明确说明它。对于许多采用TypeScript的React开发者来说，类似于children: ReactNode 的东西看起来很熟悉。
然而，另一种实现的方式是通过React的实用类型PropsWithChildren 。它自动构建一个具有相应类型的新类型，并将其标记为可选和可忽略。
最后的思考
在现代React开发中，不涉及TypeScript几乎是不可想象的。它极大地提高了代码的质量和可维护性。然而，能够正确使用TypeScript是一种完全独立的技能。这尤其适用于TypeScript和React的结合。
为了对此有所帮助，本文介绍了对React开发者有用的七种不同的TypeScript工具类型。这些工具要么在常见的React开发实践中有用，要么专门针对React开发。理解和掌握这些类型将大大改善你的类型化React代码的质量。
Want to Connect?
