类型脚本。对React最有用的五种实用类型

433 阅读3分钟

类型脚本。对React最有用的五种工具类型

Iskander Samatov

Iskander Samatov

关注

7月18日- 3分钟阅读

在这篇文章中,我将介绍在React应用中实用的五种TypeScript实用类型。

什么是实用类型?

在使用TypeScript时,你经常需要在现有类型的基础上构建新的类型。以这种方式创建新类型有几个优点。

  • 遵循DRY原则。重用你已经拥有的类型来构建新的类型意味着在你的代码中减少冗余和重复。
  • 让你的类型在变化中保持同步。当你需要改变一些底层类型的属性时,从它派生出来的类型也会采用这种改变。

正如你可能知道的那样,TypeScript 有 union 和 intersection 类型 ,人们经常使用它们来构建新类型。但TypeScript还提供了许多强大的实用类型,对于处理更细微的边缘情况来说是更好的选择。

React的实用类型

keyof

严格来说,keyof 是一个操作符,而不是一个实用类型,但它的使用方式是类似的。keyof 创建一个由你传递的类型的属性名称组成的联合类型。keyof 非常适合于强制使用对象的现有键。

keyof

当你把PostKeysType 赋值给一个变量时,该变量的值只能是author,title, 或content

局部

Partial 将返回一个新的类型,所有的道具都被设置为可选。这对于传递一个动态的道具集来说是很好的,因为你事先不知道你可能收到的所有道具。

部分

我们将fieldsToUpdate 类型设置为Partial<Post> 。这允许传递一个具有动态字段的对象,只要它们是Post 类型的一部分。

挑选

你可以使用Pick ,通过指定你想复制的属性来创建一个新类型。为了挑选属性,你可以传递一个联合类型。

挑选

这样创建类型的好处是,你可以保持你的类型同步。对父类型的属性的改变会自动被派生类型所采纳。

省略

Omit 看作是Pick 的反面。与其挑选你想复制的道具集,不如提供一组你想从类型中省略的属性。Omit 将复制所有的道具,除了你传递的那些。

省略

排除

Exclude 的工作方式与Omit 相似,但有一个很大的区别--它适用于联合类型。当你对一个联合类型应用Exclude ,它将删除该联合的一个成员。

排除

总结

在这篇文章中,我们介绍了在React项目工作时最有可能使用的TypeScript实用类型。然而,我们只是触及了实用类型的表面。TypeScript 还提供了更多的实用类型,你可以在这里看一下详尽的列表。

编码愉快!

原文发表于 https://isamatov.com 于2021年7月18日。