TypeScript 中如何正确使用类型映射

面试官:小伙子,你的数组去重方式惊艳到我了

在 TypeScript 应用程序的编写过程中,类型映射是一个非常有用的类型工具,能够更好地理解代码并使其更可读。类型映射是指一种用于转换接口类型的工具,通过将一个接口中每个属性应用一个映射函数,生成一个新的接口类型。本文将介绍 TypeScript 中如何正确使用类型映射,并提供有关它如何工作、为什么有用以及如何使用的详细说明。

类型映射的工作原理

在 TypeScript 中,类型映射是一种将一种类型转换为另一种类型的机制。类型映射允许开发人员添加、删除、修改接口中的属性并生成新的接口类型。

下面是一个简单的类型映射的示例:

---- --------- - -
    -- -- ----- ---- -----
--

该代码中的 Update<T> 类型将使用泛型类型 T 作为输入,然后将 T 中的所有属性转化为可选属性。这个类型映射使得现有的接口可以通过只修改某些属性而不是完全覆盖来得到更新。为了将类型映射应用于一个接口,我们可以编写以下代码:

--------- ------ -
    ----- -------
    ---- -------
    ------ -------
-

---- ------------- - ---------------

在这个示例中,UpdatedPerson 接口将被创建并继承了 Person 接口。这个新的接口将拥有 nameageemail 属性的所有可选版本。

类型映射的用途

类型映射的主要目的是为了增加类型安全性并使代码更具可读性。让我们看一下它如何被应用于实际场景中的代码中。

更好的类型安全

通过使用类型映射,我们可以将一个接口中的所有属性转换为可选属性。这意味着我们可以创建一个新的接口,其中一些属性可以被省略,而仍然满足编译器的要求。例如,考虑以下代码:

--------- ------ -
    ----- -------
    ---- -------
    ------ -------
-

---- -------------- - ----------------

现在,OptionalPerson 接口将具有 nameageemail 属性的所有可选版本。这使得我们可以在创建具有一些属性的对象时省略其他属性,而不会导致 TypeScript 编译器出现错误。

更好的类型推断

另一个使用类型映射的好处是使类型推断更加精确。当我们处理多个接口时,可以使用类型映射将它们组合成一个新的接口类型。这种组合可以通过生成一个新的接口类型并将其用作输入类型。例如,考虑以下代码:

--------- ------ -
    ----- -------
    ---- -------
-

--------- ------- -
    ------ -------
    ------ -------
-

---- ------------- - ------ - --------

现在,我们有一个新的 PersonContact 类型,它将 PersonContact 接口合并为一个。我们可以使用这个新的类型将 PersonContact 对象合并在一起并获得更高的类型推断和类型检查。

如何使用类型映射

在本节中,我们将深入介绍类型映射的语法和使用方法。

映射对象属性

类型映射最基本的用法是对一个对象中的每个属性进行映射,通过应用一个函数返回的新类型插入到新生成的类型中。对于对象 T 中的每个属性 P,我们可以创建新接口的属性方式如下:

---- ------- - -
  -- -- ----- --- -------------------
-

这种映射方式可以使用各种方法 SomeFunction 对此选取并转换 T[P] 的类型。例如,Person 接口的所有属性都可以转换为一个 string 类型的可选属性,如下所示:

---- ----------------- - -
  -- -- ----- ---- -------
--

---- ------------ - -----------------------

映射对象属性并去除某些属性

除了将所有属性映射为新类型之外,还可以选择去除某些属性。这可以通过使用 ExcludePick 以及类型映射它们来完成。要从接口 T 中排除属性 P,可以使用 ExcludePick 以及类型映射它们:

---- -------------------- -- - ------- ------------- -- ----

---- ----- - ------------------------- -------

在这个示例中,我们创造了一个名为 MyObj 的新类型,并从 Person 接口中排除了 age 属性。类型映射被用于在新类型中映射 Person 接口的所有属性,然后使用 Pick 将其与 Exclude 结合使用以从新接口中去除 age 属性。

映射对象属性和值

最高阶的类型映射方式是将旧接口中的所有属性映射到新接口中的新值。这样,我们可以根据旧型号的某些属性获得新型号的值。这可以通过使用 MappedTypesinfer 关键字进行实现:

---- ---------- - ------- ---

---- ------------ - -
  -- -- ----- --- -----
--

---- --------- - ----------------------

---- --------------- - -
  -- -- ----- --- --------
    -- -- --- -----
  ---
------- ---

---- --------- - --------------
  -- -------
  -- -------
  -- --------
---

通过将映射函数类型编写为 MapToTrue 和使用 ValueOf 类型将函数应用于新映射的接口上。通过创建新类型 ToTrue 和组合其他映射类型和关键字,我们可以使用 GetTruePropsTrueProps 从这个大型类型中获取单个 true 属性。

结论

在 TypeScript 中,类型映射是一种将一种类型转换成另一种类型的强大工具。通过使用类型映射,我们可以增加类型安全、精确类型推断和更好的代码可读性。在本文中,我们已经深入分析了类型映射的原理、用途和语法,希望本文可以给您提供有价值的帮助!

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67067722d91dce0dc85d635a


猜你喜欢

  • 如何使用 Enzyme 生成 React 的快照测试

    React 是一个流行的前端开发框架,用于构建交互式用户界面。开发人员需要测试他们的 React 应用程序来确保应用程序的正确性。Enzyme 是一个测试实用程序库,可以帮助 React 开发人员创建...

    10 天前
  • 无障碍技术在智能家居安全中的应用

    随着智能家居的普及和发展,人们的生活变得更加便利和舒适。但同时,安全问题也成为了智能家居领域的一个重大挑战。在这个领域,无障碍技术可以发挥重要的作用。本文将介绍无障碍技术在智能家居安全中的应用,并给出...

    10 天前
  • Next.js 如何处理静态资源?

    Next.js 是一款非常流行的 React 框架,它提供了一些方便的功能和工具,其中静态资源的处理也是一个很重要的功能。 静态资源包括图片、样式表、字体、JavaScript 等,这些资源需要在 W...

    10 天前
  • PWA 实现中如何添加新的资源到缓存?

    前言 PWA(Progressive Web Apps)是一种新型的 Web 应用程序模型,它允许您创建具有原生应用程序体验的 Web 应用程序。PWA 的核心在于离线访问和缓存,这使得应用程序可以即...

    10 天前
  • Redux 中如何处理新闻推送?

    现今我们无时无刻不在接收新闻推送,这些推送来自社交媒体、新闻客户端等平台。在这个信息过载的时代,如何准确高效地处理新闻推送就成为了每个开发者的心中诉求。 Redux 是一种 JavaScript 应用...

    10 天前
  • Tailwind CSS 框架下如何实现 HTML 表单的快速开发?

    在前端开发中,表单是不可避免的一个部分。而在表单的开发中,使用 CSS 样式的设计和排版是非常重要的。Tailwind CSS 是一个自定义 CSS 样式库,可以使开发者更加便捷和高效地开发和修改样式...

    10 天前
  • RxJS 在 Vuejs 中的最佳实践

    随着 Vuejs 的普及,RxJS 也成为前端开发中不可或缺的一部分。RxJS 是一个函数性编程库,它使得异步编程更加容易和直观。在 Vuejs 中,我们可以使用 RxJS,来使得代码更加健壮、灵活和...

    10 天前
  • React Native 中的 Props 和 State

    React Native是一种基于React的框架,用于构建iOS和Android应用程序。在React Native的开发中,Props和State是两个非常重要的概念。

    10 天前
  • CSS Grid 中创建网格的不同方式

    网格布局(Grid Layout)是一种强大的布局方式,它让开发者能够轻松地创建复杂的网格布局。在 CSS Grid 中,我们可以使用多种方式来创建网格,这些方式有各自的优点和限制。

    10 天前
  • 解决 Angular 7 应用程序中的重定向问题

    在 Angular 7 应用程序中,重定向是一个常见的需求。无论是在用户访问未授权页面时还是在需要进行授权时,都需要进行重定向。但是,如果不正确地处理重定向,可能会导致各种问题,例如循环重定向、路由不...

    10 天前
  • Node.js 中集成 SocketCluster 实现实时通讯

    随着互联网技术的飞速发展,越来越多的应用需要实现实时通讯功能。在前端领域,以实时聊天为代表的应用已经越来越流行。而如何实现高效、稳定的实时通讯呢?本文将介绍如何在 Node.js 中集成 Socket...

    10 天前
  • Fastify 调试技巧:使用 fastify-dev-errors 插件处理开发错误

    Fastify 是一个高度优化的,低开销的 Node.js 框架,适用于构建高性能 Web 应用程序。但是,即使在使用 Fastify 进行开发时,您仍然可能会遇到错误。

    10 天前
  • MongoDB 哪些情况下会导致数据备份失败?

    MongoDB 是一种流行的文档数据库,备份数据是数据库管理中很重要的一步。我们经常需要在生产环境中备份 MongoDB 数据,以避免数据丢失或遭受其他灾难性事件。但是,在备份时遇到错误是常见的。

    10 天前
  • CSS Reset 之后如何解决默认 widget 样式问题

    当我们开始写前端代码时,我们需要遵循一些基本样式。 但是,每个浏览器都有自己的默认样式,这可能会导致浏览器之间的显示差异。为了解决这个问题,我们使用 CSS reset。

    10 天前
  • Material Design 工具栏的 Appcompat 抽象类详解

    Material Design 是 Google 开发的一种视觉设计语言,可以为开发者提供统一的 UI 设计风格,使产品更具有现代感。其中,工具栏(Toolbar)是 Material Design ...

    10 天前
  • Next.js 支持 TypeScript 的使用方式

    在现代化的 Web 开发中,前端框架和库已经广泛应用于实际开发并极大提高开发效率。随着 TypeScript 的流行,TypeScript 成为 Web 开发的主流语言,而 Next.js 作为一个流...

    10 天前
  • ES8 中的新特性:ES6 模块支持动态导入导出

    ES8(EcmaScript2017)是 JavaScript 的一种版本,其中包含了很多新的特性和改进,让我们更加高效地编写 JavaScript 代码。其中一个新特性就是 ES6 模块支持动态导入...

    10 天前
  • 无障碍设计与增强现实技术的结合实践

    前言 随着数字化的深入发展,无障碍设计已经成为了现代设计师必备的一种技能。而增强现实技术作为一种新兴的技术,它的应用范围也越来越广泛。在这篇文章中,我们将探讨无障碍设计与增强现实技术的结合实践,并且给...

    10 天前
  • 如何在Babel中使用WebSocket进行实时通信

    如何在Babel中使用WebSocket进行实时通信 在Web应用程序中,实时通信是不可或缺的。WebSocket作为一种现代化的通信协议,已经被广泛应用于Web应用程序中。

    10 天前
  • Redux 中如何处理分布式数据?

    Redux 是一种全局状态管理工具,它可以在整个应用程序中管理状态,并在多个组件之间共享数据。在分布式应用程序中,Redux 提供了一种处理分布式数据的方法,以便在不同的机器上同步数据,并确保每个机器...

    10 天前

相关推荐

    暂无文章