Typescript高级: 深入理解Extract类型

概述

  • 在TypeScript这一逐渐成为前端开发首选的静态类型检查语言中,类型系统提供了丰富的工具来帮助开发者编写更加健壮和可维护的代码。
  • 其中,Extract<T, U>是一个强大的内置实用类型,用于从一个联合类型T中提取出属于另一个类型U的那些类型。
  • 本文将深入探讨Extract类型的工作原理、应用场景以及如何有效利用它来提升代码的类型安全性和表达力。

什么是Extract<T, U>?

  • Extract<T, U>是一个条件类型,其定义为:从类型T中选取那些同时也可以被类型U赋值的类型
  • 简而言之,它像一个过滤器,保留了T中与U兼容的部分
  • 在TypeScript的类型系统中,兼容性意味着一个类型可以被另一个类型所赋值
  • 例如,任何派生自基类的类型都可以赋值给基类类型

基本用法

type A = string | number | boolean;
type B = number | boolean;type C = Extract<A, B>; // 结果为: number | boolean
  • 在这个例子中,Extract<A, B>的结果是A类型中与B兼容的类型,即number和boolean

应用场景

  • 类型筛选:在处理复杂的联合类型时,Extract可以帮助我们精炼出特定的类型,特别是在大型项目中处理API响应或状态管理时,能够有效地缩小类型范围,提高代码的可读性和准确性

  • 泛型约束:结合泛型使用,Extract可以创建更加灵活且精确的类型约束。例如,在定义一个函数时,可以约束参数类型必须是某联合类型的一个子集,从而限制函数的适用范围

  • 类型映射:在实现类型映射或类型转换时,Extract可以帮助我们基于类型兼容性进行有选择的映射,特别是在处理多态或复杂类型系统设计时

实战案例


1 )从API响应中提取特定类型

  • 假设你正在处理一个API响应,该响应可能包含多种类型的数据,但你只关心其中的某些类型
    type ApiResponse = { type: 'user'; data: User } | { type: 'post'; data: Post } | { type: 'comment'; data: Comment };type UserSpecificResponse = Extract<ApiResponse, { type: 'user' }>;
    

2 ) 泛型约束与类型映射

  • 考虑一个函数,它应该只处理某些特定类型的对象集合
    // UserSpecificResponse 现在是 { type: 'user'; data: User }
    type Animal = { kind: 'dog' | 'cat' | 'bird' };
    type Canine = { kind: 'dog' };function processCaninesOnly<T>(items: Array<Extract<T, Canine>>): void {// ...
    }const dogs: Array<{ kind: 'dog' }> = [{ kind: 'dog' }, { kind: 'dog' }];
    processCaninesOnly(dogs); // 正确,因为dogs数组元素的kind只能是'dog'
    

总结

  • Extract<T, U>类型是TypeScript中一个强大的工具,它通过条件类型实现了类型筛选,增强了类型系统的灵活性和表达力
  • 在处理复杂类型逻辑、泛型约束以及类型映射时,Extract能够帮助开发者更精细地控制类型系统,写出更加健壮和易于维护的代码
  • 通过上述介绍和案例,希望你能够掌握并充分利用Extract类型在实际项目中的应用,进一步提升你的TypeScript编码体验

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/16440.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AIGC 006-textual-inversion使用文本反转实现个性化文本到图像生成!

AIGC 006-textual-inversion使用文本反转实现个性化文本到图像生成&#xff01; 文章目录 0 论文工作1 论文方法2 效果 0 论文工作 这篇论文 (An Image is Worth One Word: Personalizing Text-to-Image Generation using Textual Inversion) 提出了一种新颖的技术&#xff0c…

Modal.method() 不显示头部的问题

ant-design中的Modal组件有两种用法&#xff1a; 第一种是用标签&#xff1a;<a-modal></a-modal> 第二种是用Api&#xff1a;Modal.info、Modal.warning、Modal.confirm...... 一开始项目中这两种用法是混用的&#xff0c;后面UI改造&#xff0c;需要统一样式&…

一个程序员的牢狱生涯(37)任务

星期一 任 务 我走回大镣面前后,把双手抱着的衣服递给大镣,但我并没有把手里的东西也递给他。现在的大镣坐着,我站着,这个时候要给大镣的话,肯定能被身边的棍子或六子看到,甚至被所有号子里的人都看到。因为此时,所有人的目光都盯着我手里的衣服,盯着我和大镣看。 “镣…

Shell字符串变量

目标 能够使用字符串的3种方式 掌握Shell字符串拼接 掌握shell字符串截取的常用格式 能够定义Shell索引数组和关联数组 能够使用内置命令alias,echo,read,exit,declare操作 掌握Shell的运算符操作 Shell字符串变量 介绍 字符串&#xff08;String&#xff09;就是一系…

使用LabVIEW时遇到VISA属性错误 -1073807331的解决方案

在LabVIEW或VeriStand中使用VISA属性时&#xff0c;可能会遇到错误 -1073807331。这一错误的具体描述如下&#xff1a; 解决方案 导致VISA属性出现此错误的原因主要有以下四种&#xff1a; 属性不被使用的串行总线支持 示例 A.1&#xff1a;Is Port Connected VISA属性仅支持由…

React(四)memo、useCallback、useMemo Hook

目录 (一)memo API 1.先想一个情景 2.用法 (1)props传入普通数据类型的情况 (2)props传入对象的情况 (3)props传入函数的情况 (4)使用自定义比较函数 3.什么时候使用memo&#xff1f; (二)useMemo Hook 1.用法 2.useMemo实现组件记忆化 3.useMemo实现函数记忆化 …

如何停止 iPad 和 iPhone 之间共享短信,独立接收和发送消息

概括 在当今高度互联的数字世界中&#xff0c;Apple 设备之间的无缝连接性提供了极大的便利&#xff0c;尤其是在消息同步方面。iPhone 和 iPad 用户通常可以享受到设备间短信的自动同步功能&#xff0c;这意味着无论是在哪个设备上&#xff0c;用户都可以接收和回复消息。然而…

2024.5.26.python.exercise

# # 导入包 # from pyecharts.charts import Bar, Timeline # from pyecharts.options import LabelOpts, TitleOpts # from pyecharts.globals import ThemeType # # # 从文件中读取信息 # GDP_file open("1960-2019全球GDP数据.csv", "r", encoding&quo…

A. Maximize?

time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard output You are given an integer x&#x1d465;. Your task is to find any integer y&#x1d466; (1≤y<x)(1≤&#x1d466;<&#x1d465;) su…

深入理解python列表与字典:数据结构的选择与性能差异

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、列表与字典&#xff1a;基础数据结构的对比 二、列表&#xff1a;逐个遍历的查找方式 …

Ceres求解优化问题

1. 简介 Ceres Solver是专门用于求解非线性最小二乘问题的C开源库,研究SLAM方向不过滤波和优化两个技术路线,因此常用Ceres库解决实际项目中的优化问题,当然还有g2o同样可用,但就说明文档而言,Ceres对新用户更友好,g2o提供不多的文档,更多是需要参考其它开源项目使用,所以笔者…

【JAVA】接口

前面我们说了说抽象类相关内容&#xff0c;这篇我们主要聊聊接口相关内容&#xff0c;这部分很重要&#xff0c;大家引起关注。 1. 接口 1.1 接口的概念 接口就是公共的行为规范标准&#xff0c;大家在实现时&#xff0c;只要符合规范标准&#xff0c;就可以通用。在Java中&am…

力扣 739. 每日温度 python AC

单调栈 class Solution:def dailyTemperatures(self, temperatures):size len(temperatures)ll []ans [0] * sizefor i in range(size - 1, -1, -1):while ll and temperatures[i] > temperatures[ll[-1]]:ll.pop()if ll:ans[i] ll[-1] - ill.append(i)return ans

C语言 数组——向函数传递数组

目录 把数组传给函数&#xff08;Passing Arrays to Functions&#xff09; 向函数传递一维数组 向函数传递二维数组 数组在学生成绩管理中的应用 例&#xff1a;计算每个学生的平均分 把数组传给函数&#xff08;Passing Arrays to Functions&#xff09; 向函数传递一维…

gnocchi学习小结

背景 总结gnocchi 4.4版本gnocchi-metricd工作流程 入口 gnocchi.cli.metricd metricd stop after processing metric默认为0&#xff0c;调servicemanager run MetricdServiceManager __init__ 服务逻辑封装到MetricdServiceManager初始化中 主要由MetricProcessor, Met…

基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践

基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践 摘要 随着技术的不断进步&#xff0c;前端开发面临越来越多的挑战&#xff0c;其中之一就是如何有效管理复杂的业务逻辑和用户体验。传统的整块应用开发方式在面对频繁的功能变更和用户体验优化时&#xff0c;往往显得…

python数据分析-CO2排放分析

导入所需要的package import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import datetime %matplotlib inline plt.rcParams[font.sans-serif] [KaiTi] #中文 plt.rcParams[axes.unicode_minus] False #负号 数据清洗…

MySQL数据表索引命名规范

在数据库设计和开发过程中&#xff0c;索引是提高查询性能的重要工具。合理的索引命名规范不仅能提高代码的可读性&#xff0c;还能便于维护和管理。本文将详细介绍MySQL数据表索引的命名规范&#xff0c;包括不同类型索引的命名方法&#xff0c;并提供多个代码示例以说明如何命…

SSH 远程登录系统和远程拷贝

文章目录 目录 文章目录 前言 一.SSH的基本用法 SSH基本用法&#xff1a; SSH无密码登录 二.SSH安全设置 三.SSH限制用户 前言 很多时候服务器并没有服务器&#xff0c;我们也不能每次都通过控制台去管理服务器&#xff0c;这时候就需要远程登录&#xff0c;相比于Telnet&a…

京东应届生公司内网说了一句‘什么时候被pdd收购‘,结果惨遭辞退

京东应届生公司内网说了一句’什么时候被pdd收购’&#xff0c;结果惨遭公司开除 这个事最近在圈子讨论比较多 前二天&#xff0c;有一个上海交大毕业的应届生&#xff0c;在京东实习了9个月&#xff0c;好不容易转正12天后&#xff0c;只因在内网说了一句话&#xff0c;就被…