TypeScript Utility Types: A Complete Guide

tl;dr: typescript 实用程序类型是预先构建的函数,可以转换现有类型,使您的代码更干净且更易于维护。本文通过实际示例解释了基本实用程序类型,包括如何更新用户配置文件、管理配置和安全地过滤数据。

TypeScript Utility Types: A Complete Guide

typescript 是现代 web 开发的基石,使开发人员能够编写更安全、更易于维护的代码。通过向 javascript 引入静态类型,typescript 有助于在编译时捕获错误。根据 2024 年 stack overflow 开发者调查,typescript 在开发者中最流行的脚本技术中排名第 5。

typescript 令人惊叹的功能是其成功的主要原因。例如,实用程序类型可以帮助开发人员简化类型操作并减少样板代码。 typescript 2.1 中引入了实用程序类型,并且每个新版本中都添加了其他实用程序类型。

本文将详细讨论实用程序类型,以帮助您掌握 typescript。

了解 typescript 实用程序类型

实用程序类型是 typescript 中预定义的泛型类型,可以将现有类型转换为新的变体类型。它们可以被认为是类型级函数,将现有类型作为参数并根据某些转换规则返回新类型。

这在使用接口时特别有用,因为通常需要修改已存在类型的变体,而实际上不需要复制类型定义。

核心实用程序类型及其实际应用

TypeScript Utility Types: A Complete Guide

部分的

partial 实用程序类型采用一个类型并使其所有属性都是可选的。当类型嵌套时,此实用程序类型特别有价值,因为它使属性递归地可选。

例如,假设您正在创建一个用户配置文件更新功能。在这种情况下,如果用户不想更新所有字段,则可以只使用 partial 类型,只更新所需的字段。这在不需要所有字段的表单和 api 中非常方便。

请参考以下代码示例。

interface user {  id: number;  name: string;  email?: string;}const updateuser = (user: partial) => {  console.log(updating user: ${user.name} );};updateuser({ name: 'alice' });

必需的

required 实用程序类型构造一个类型,并将所提供类型的所有属性设置为 required。这对于确保在将对象保存到数据库之前所有属性都可用非常有用。

例如,如果在汽车注册时使用必填,它将确保您在创建或保存新汽车记录时不会错过任何必要的属性,例如品牌、型号和里程。这对于数据完整性而言非常关键。

请参考以下代码示例。

interface car {  make: string;  model: string;  mileage?: number;}const mycar: required = {  make: 'ford',  model: 'focus',  mileage: 12000,};

只读

readonly 实用程序类型创建一个所有属性都是只读的类型。这在配置管理中非常有用,可以保护关键设置免受不必要的更改。

例如,当您的应用程序依赖于特定的 api 端点时,它们不应在执行过程中发生更改。将它们设置为只读可以保证它们在应用程序的整个生命周期中保持不变。

请参考以下代码示例。

interface config {  apiendpoint: string;}const config: readonly = { apiendpoint: 'https://api.example.com' };// config.apiendpoint = 'https://another-url.com'; // error: cannot assign to 'apiendpoint'

挑选

pick** 实用程序类型通过从现有类型中选取一组属性来构造类型。当您需要过滤掉重要信息(例如用户姓名和电子邮件)以显示在仪表板或摘要视图中时,这非常有用。它有助于提高数据的安全性和清晰度。

请参考以下代码示例。

interface user {  id: number;  name: string;  email: string;}type usersummary = pick;const usersummary: usersummary = {  name: 'alice',  email: 'alice@example.com',};

忽略

omit 实用程序类型通过从现有类型中排除特定属性来构造类型。

例如,如果您想与某些第三方共享用户数据但没有敏感信息(例如电子邮件地址),省略将很有用。您可以通过定义一个排除这些字段的新类型来做到这一点。特别是在 api 中,您可能想观察 api 响应中的外部内容。

请参阅下一个代码示例。

interface user {  id: number;  name: string;  email?: string;}const userwithoutemail: omit = {  id: 1,  name: 'bob',};

记录

record 实用程序类型创建具有指定键和值的对象类型,这在处理结构化映射时非常有用。

例如,在库存管理系统的上下文中,record 类型可用于在项目和数量之间进行显式映射。通过这种类型的结构,可以轻松访问和修改库存数据,同时确保所有预期的水果都得到考虑。

type fruit = 'apple' | 'banana' | 'orange';type inventory = record;const inventory: inventory = {  apple: 10,  banana: 5,  orange: 0,};

排除

排除**实用程序类型通过从联合中排除特定类型来构造类型。

在设计只接受某些基元类型(例如数字或布尔值,但不接受字符串)的函数时,可以使用 排除。这可以防止意外类型可能在执行过程中导致错误的错误。

请参考以下代码示例。

type primitive = string | number | boolean;const value: exclude = true; // only allows number or boolean.

提炼

extract 实用程序类型通过从联合中提取特定类型来构造类型。

在只需要处理混合类型集合中的数值(例如执行计算)的情况下,使用 extract 可确保仅传递数字。这在数据处理管道中非常有用,其中严格的类型可以防止运行时错误。

请参考以下代码示例。

type primitive = string | number | boolean;const value2: extract = 42; // only allows numbers.

不可为空

nonnullable 实用程序类型通过从给定类型中排除 nullundefined 来构造类型。

在需要始终定义某些值(例如用户名或产品 id)的应用中,将它们设置为 nonnullable 将确保此类关键字段永远不会为 null未定义。它在表单验证和 api 响应期间非常有用,因为缺少值可能会导致问题。

请参阅下一个代码示例。

type nullablestring = string | null | undefined;const value3: nonnullable = 'hello'; // null and undefined are not allowed.

返回类型

returntype 实用程序提取函数的返回类型。

当使用返回复杂对象(例如坐标)的高阶函数或回调时,使用 returntype 可以简化定义预期的返回类型,而无需每次都手动声明它们。这可以通过减少与类型不匹配相关的错误来加快开发速度。

type pointgenerator = () => { x: number; y: number };const point: returntype = {  x: 10,  y: 20,};

参数

参数实用程序将函数的参数类型提取为元组。

在想要动态操作或验证函数参数的情况下,例如在函数周围编写包装器时,这可以轻松提取和重用参数类型。通过确保函数签名的一致性,它极大地提高了代码库中代码的可重用性和可维护性。

请参考以下代码示例。

function createuser(name: string, age: number): user {  return { name, age };}type createuserparams = parameters;

具有实用程序类型组合的高级用例

使用 typescript 开发应用程序时,组合这些实用程序类型可以获得强大的结果。让我们看一下多种实用程序类型有效协同工作的一些场景。

结合部分和必需

您可以创建一个需要某些字段而允许其他字段可选的类型。

interface user {  id: number;  name?: string;  email?: string;}// combining partial and requiredtype updateuser = required<pick> & partial<omit>;const updateuserdata: updateuser = { id: 1, name: 'alice' }; // valid

在此示例中,updateuser 需要 id 属性,同时允许名称和电子邮件为可选。此模式对于更新标识符必须始终存在的记录非常有用。

创建灵活的 api 响应

您可能想要定义根据特定条件具有不同形状的 api 响应。

interface apiresponse {  data?: t;  error?: string;}// using record with omit for flexible responsestype userresponse = apiresponse<pick>;const response1: userresponse = { data: { name: 'alice', email: 'alice@example.com' } };const response2: userresponse = { error: 'user not found' };

这里,apiresponse 允许您为 api 调用创建灵活的响应类型。通过使用 pick ,您可以确保响应中仅包含相关的用户数据。

结合排除和提取来过滤类型

您可能会遇到需要根据特定条件从联合中过滤掉特定类型的情况。

请参考以下代码示例。

type responsetypes = 'success' | 'error' | 'loading';// extracting specific response types while excluding otherstype nonloadingresponses = exclude;const handleresponse = (responsetype: nonloadingresponses) => {    if (responsetype === 'success') {        console.log('operation was successful!');    } else if (responsetype === 'error') {        console.log('an error occurred.');    }};handleresponse('success'); // valid call// handleresponse('loading'); // error as loading is excluded

这里,exclude 实用程序用于创建一个类型 ( nonloadingresponses ),从原始 responsetypes 联合中排除 loading,允许 handleresponse 函数仅接受成功错误作为有效输入。

最佳实践

仅使用必要的

虽然实用程序类型非常强大,但过度使用它们可能会导致复杂且不可读的代码。在利用这些实用程序和保持代码清晰度之间取得平衡至关重要。

请参阅下一个代码示例。

type user = {  id: number;  name: string;  email?: string;};// overly complex type using multiple utilities.type complexuser = partial<required<pick>>;// this can be confusing and hard to maintain.const user1: complexuser = { name: 'alice' }; // valid, but unclear intent

保持清晰度

确保每个实用程序用例的目的明确。避免将太多实用程序嵌套在一起,因为它可能会混淆类型的预期结构。

请参考以下代码示例。

type product = {  id: number;  name: string;  description?: string;  price: number;};// clear and understandable use of utility types.type productpreview = pick;const preview: productpreview = {  id: 101,  name: 'smartphone',};

性能考虑

虽然在运行时性能影响很少,因为 typescript 类型在编译后消失,但复杂类型会减慢 typescript 编译器的速度,影响开发速度。

// A complex type that could impact performance if used excessively.type DeeplyNestedType = {  level1: {    level2: {      level3: {        level4: {          level5: string;        };      };    };  };};// Accessing deeply nested properties can lead to performance issuesconst example: DeeplyNestedType = {  level1: {    level2: {      level3: {        level4: {          level5: 'Hello',        },      },    },  },};console.log(example.level1.level2.level3.level4.level5); // Performance hit on deep access

结论

毫无疑问,typescript 是 web 开发人员中最流行的语言之一。实用程序类型是 typescript 中的独特功能之一,如果正确使用,它可以显着提高 typescript 开发体验和代码质量。但是,我们不应该在所有场景中都使用它们,因为可能会出现性能和代码可维护性问题。

相关博客

javascript 和 typescript 的顶级 linters:简化代码质量管理每个开发人员都应该知道的 7 个 javascript 单元测试框架typescript 中感叹号的使用理解 typescript 中的条件类型

以上就是TypeScript Utility Types: A Complete Guide的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1499035.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:58:05
下一篇 2025年12月19日 20:58:15

相关推荐

  • Radix UI 用自定义调色板替换 Radix Color

    在我正在开发的新 next.js 项目中,我选择 tailwind css 和 radix ui 进行样式设置。 radix ui 提供了一个自定义调色板工具,允许开发人员定义自己的强调色和灰色。然而,我搜索了整个文档,并没有找到实现自定义颜色的有效方法。 我开始谷歌搜索,为了救援,我找到了一个博客…

    2025年12月19日
    000
  • 掌握 Python Selenium 中的断言:测试综合指南

    在 selenium python 中编写测试自动化脚本时,验证实际结果是否与预期结果匹配至关重要。这就是断言发挥作用的地方。断言通过检查特定条件并在失败时停止执行来帮助确保您的应用程序按预期工作。 在这篇博客中,我们将分解 selenium python 中断言的概念,提供一些易于理解的代码示例,…

    2025年12月19日
    000
  • 如何制作API接口?

    api是应用程序编程接口,可以理解为与不同软件系统进行通信的通道。它本质上是一个预定义的函数。 api有多种形式,最流行的一种是使用http协议提供服务(如:restful),只要符合规定就可以正常使用。现在很多企业都使用第三方提供的api,也为第三方提供api,所以api的设计也需要谨慎。 如何设…

    2025年12月19日
    000
  • Nextjs:具有 API 集成的动态路由

    想法 next.js 提供了一个基于文件的路由系统,支持动态路由(例如 /product/[id])。您可以将其与动态数据获取结合起来,创建灵活且可扩展的应用程序。这对于电子商务产品页面、用户个人资料或任何具有唯一标识符的内容等情况特别有用。 示例:动态产品页面 1。设置动态路线 在 /pages/…

    2025年12月19日 好文分享
    000
  • TIL 如何使用 JS 查看 GitLab 上的整个提交列

    这是很久以前的事了,但我将其添加到这里作为自我注释。 每当你在 gitlab 上打开 ci/cd > pipelines 时,你可能经常会看到这样的东西: 您可以通过在浏览器上打开开发控制台并更改一些 css 来修复样式来查看整个内容。您也可以查看整个列的另一种方法是创建一个新书签(在任何页面…

    2025年12月19日 好文分享
    000
  • 在 Nodejs 中进行身份验证的正确方法 [uide]

    身份验证是后端开发中最关键但经常被误解的方面之一。由于其复杂性,开发人员经常转向第三方解决方案,例如 auth0 或 supabase。虽然这些都是优秀的工具,但构建您自己的身份验证系统可以提供更大的灵活性和控制力。 在本指南中,您将了解如何以最少的依赖关系为 express.js api 服务实现…

    2025年12月19日
    000
  • 表单事件绑定在 KnockoutJs 中如何工作

    此内容基本上是原始材料的翻译。目的是了解 magento 2 的 knockoutjs 并用葡萄牙语创建有关 knockoujs 的内容。 文档 数据绑定语法绑定上下文“点击”绑定“事件”绑定“提交”绑定“启用”和“禁用”绑定“值”绑定“textinput”绑定“hasfocus”绑定“已检查”绑定…

    2025年12月19日
    000
  • Performance Optimization with Middleware in Nodejs

    中间件通过在请求-响应周期的各个阶段拦截和处理请求,在 node.js 应用程序中发挥着至关重要的作用。虽然中间件提供了灵活性和模块化,但如果不能有效实施,它也可能成为瓶颈。在这篇文章中,我们将探讨优化中间件的策略,以确保您的应用程序发挥最佳性能。 为什么要优化中间件? 中间件在应用程序的核心运行,…

    2025年12月19日
    000
  • 一切都围绕Javascript

    JavaScript 在现代 Web 开发中的核心地位 JavaScript 已成为 Web 开发的支柱,从简单的脚本语言发展成为驱动整个 Web 的交互性和动态内容的强大工具。本文探讨了为什么一切都围绕 JavaScript、它的历史意义、它当前的应用以及它在技术领域的未来。 JavaScript…

    2025年12月19日
    000
  • 使用 Jest 掌握模拟 API 调用:综合教程

    使用 jest 模拟 api 调用对于编写高效、快速且可靠的测试至关重要。本教程将指导您了解使用 jest 的广泛库和高级场景适配器来控制模拟响应的基本技术。 在为进行 api 调用的代码编写测试时,模拟这些调用非常重要。此策略可确保您的测试可靠、快速且独立于外部服务。 jest 是一种流行的 ja…

    2025年12月19日 好文分享
    000
  • 什么是 TypeScript 以及为什么要使用它?

    typescript 是一个功能强大的 javascript 扩展,它因使 web 和应用程序开发更加安全、可扩展和高效而广受欢迎。我们将探讨 typescript 是什么、为什么在您的下一个项目中考虑使用它,以及它如何改善您的开发体验。 什么是 typescript? typescript 是一种…

    2025年12月19日
    000
  • 本周 JavaScript 2

    javascript 不断发展。最新的重大更新 ecmascript 2023 (es14) 于 2023 年 6 月发布。此更新引入了多项新功能,增强了语言的功能并提高了开发人员的效率。 ecmascript 2023 的主要特性 1。顶级等待顶层await的引入允许开发者在模块的顶层使用awai…

    2025年12月19日
    000
  • NgSysV: Firestore CRUD templates

    该帖子系列已在 ngatesystems.com 上建立索引。您还可以在那里找到超级有用的关键字搜索工具。 最后评论:24 年 11 月 介绍 google 提供的关于 firestore crud(创建、读取、更新、删除)说明的大量在线文档对于日常使用来说可能过于详细。以下是最重要的 firest…

    2025年12月19日
    000
  • &#新&#关键字

    在 javascript 中,“new”关键字通过构造函数创建对象的新实例。 新关键字的目的: 对象创建。原型链接。绑定“this”并返回新创建的对象。 运作原理: 当您在构造函数中使用 new 关键字时,将执行以下步骤: 创建了一个新的空对象。新对象的原型设置为构造函数的原型。构造函数被调用到设置…

    2025年12月19日
    000
  • 谷歌个人资料设计

    Google 不仅是一家商业公司,而且还是一项便捷的国际服务,用于智能存储有关用户及其需求的数据。 在我看来,与 Mail 相比,这是一个规模更大的系统,涵盖了与用户合作的许多微妙之处,包括考虑到个人数据法。 当我们谈论社交网络上的个人资料时,重要的是要强调这是必要的: 使您访问的应用程序和网站保持…

    2025年12月19日
    000
  • JavaScript 数学对象备忘单

    javascript 中的 math 对象提供了一组用于执行数学任务的属性和方法。这是 math 对象的综合备忘单。 属性 math 对象有一组常量: property description value (approx.) math.eeuler’s number2.718math.l…

    2025年12月19日
    000
  • QueryBuilder 实践第 1 部分

    一般使用 node.js 或具体使用 total.js 构建应用程序时,高效查询和管理数据至关重要。在本博客中,我们将介绍如何使用 total.js querybuilder 执行基本数据操作。第一部分将介绍基本概念,演示插入和检索数据等核心操作,并展示实际示例以帮助您入门。 入门:探索 total…

    2025年12月19日
    000
  • NgSysV响应式/自适应设计

    该帖子系列已在 ngatesystems.com 上建立索引。您还可以在那里找到超级有用的关键字搜索工具。 最后评论:24 年 11 月 一、简介 帖子 4.2 透露,如果您希望您的 web 应用程序出现在网络搜索中,您必须确保: 您的网络应用程序在手机小屏幕上查看时效果良好,并且您想要被搜索引擎索…

    2025年12月19日
    000
  • 带有 UI 的 Github 图像托管 API

    该项目是使用 github 存储库作为图像托管服务的概念证明。该 api 允许用户从存储库上传、列出和删除图像文件,提供了一个简单的界面来管理 github 上托管的文件。 github:masfana/github-image-bucket-api 安装 要设置并运行此项目,您需要在系统上安装 n…

    2025年12月19日
    000
  • 渐进式 Web 应用程序:现代 Web 开发的终极指南

    渐进式 Web 应用程序:概述渐进式 Web 应用程序是可以使用离线缓存安装的独立应用程序。它们可以安装在单个代码库上的所有设备上,为您提供类似本机的体验。它们于 2016 年推出,是作为特定于设备的应用程序的替代方案而构建的,但现在可以在一系列不同的系统上使用,包括桌面和移动设备。开发渐进式 We…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信