Typescript高级: 深入理解infer关键字

概述

  • 在 TS 中,infer 是一个高级类型操作,特别是条件类型和映射类型中非常有用的关键字
  • 它在泛型中使用也会是一个强大工具,增强了类型推断的能力,让开发者更灵活地处理和操作类型
  • 它允许在泛型类型推导过程中捕获一个具体的类型,这对于编写复杂的类型转换和映射操作特别有用
  • infer 的定义
    • infer 表示在 extends 条件语句中以占位符出现的用来修饰数据类型的关键字
    • 被修饰的数据类型等到使用时才能被推断出来
  • infer 占位符式的关键字出现的位置
    • infer 出现在 extends 条件语句后的函数类型的参数类型位置上
    • infer 出现在 extends 条件语句后的函数类型的返回值类型上
    • infer 出现在类型的泛型具体化类型上

实现

1 )infer 出现在 extends 条件语句后的函数类型的参数类型位置上

// 定义了一个接口Customer,它描述了一个具有name(字符串类型)和moneyPaid(数字类型)属性的对象
interface Customer {name: stringmoneyPaid: number
}// 定义了一个函数类型,接受一个Customer类型的参数并返回一个字符串
type custFuncType = (cust: Customer) => string// 定义了一个泛型类型inferType<T>,这是理解的重点。这是一个条件类型,它使用了infer关键字
type inferType<T> = T extends (params: infer P) => any ? P : T// 定义了inferResultType类型别名,它是通过将前面定义的custFuncType类型作为参数传递给inferType得到的
type inferResultType = inferType<custFuncType>
  • 分析一下这行代码:type inferType<T> = T extends (params: infer P) => any ? P : T
    • T extends (params: infer P) => any
      • 这部分是一个类型测试,检查T是否可以赋值给一个函数类型
      • 该函数接受一个参数(我们称之为params)
      • infer P关键字在这里用于声明一个新的类型变量P,用来捕获T中函数参数的实际类型
    • ? P
      • 如果上面的测试为真(即T确实是一个函数类型)
      • 那么整个条件类型的结果就是捕获的参数类型P
    • : T
      • 如果上面的测试为假(即T不是函数类型或不匹配)
      • 则条件类型的结果就是T本身,不做任何改变
  • 最后一行代码 type inferResultType = inferType<custFuncType>
    • custFuncType是一个接受Customer类型参数的函数,所以infer P会捕获到这个参数类型
    • 因此,inferResultType 实际上就是Customer类型

2 ) infer 出现在 extends 条件语句后的函数类型的返回值类型上

// 定义了一个接口Customer,它描述了一个具有name(字符串类型)和moneyPaid(数字类型)属性的对象
interface Customer {custname: stringmoneyPaid: number
}
// 这个类型定义了一个函数,该函数接受一个Customer类型的参数并返回一个字符串
type custFuncType = (cust: Customer) => string
type inferType<T> = T extends (params: any) => infer P ? P : T
type inferResultType = inferType<custFuncType>
  • 核心在这里, type inferType<T> = T extends (params: any) => infer P ? P : T
    • 上面,inferType 的 infer 在返回值的位置上
    • infer P 表示“推断出一个类型 P”,这个 P 是函数的返回类型
    • 它根据 extends 的检查结果来选择不同的类型
    • 如果 T 是一个符合 (params: any) => … 形式的函数类型
    • 那么表达式的结果是 P(即函数的返回类型)
    • 否则,表达式的结果是 T 本身
  • 最后,type inferResultType = inferType<custFuncType>
    • 由于,custFuncType 是一个返回值为 string 的函数类型
    • 符合,inferType 内部的三元推导的条件,因为 返回值是 P, 而在这里P又是 string 类型
    • 所以,type inferResultType 就是 string 类型

3 ) infer 出现在类型的泛型具体化类型上

class Subject {constructor(public id: number, public name: string) {}
}const chineseSubject = new Subject(100, "语文");
const mathSubject = new Subject(101, "数学");type ElementOfSet<T> = T extends Set<infer E> ? E : never;const subjectsSet = new Set<Subject>([chineseSubject, mathSubject]);type SubjectType = ElementOfSet<typeof subjectsSet>;// 使用推断出的SubjectType类型
function printSubject(subject: SubjectType) {console.log(`学科ID: ${subject.id}, 学科名称: ${subject.name}`);
}printSubject(chineseSubject);
  • 核心代码在这里:type ElementOfSet<T> = T extends Set<infer E> ? E : never;
    • 如果 参数 T 属于 Set 类型,则 ElementOfSet 则是 E 的类型
    • 这里 Set<infer E> 使用 infer E 推导出 E的类型,如果符合 extends 条件,则返回E,否则返回 never
  • const subjectsSet = new Set<Subject>([chineseSubject, mathSubject]);
    • 这里 subjectsSet 是一个 Set 类型,而且单个元素是 Subject 类型
  • type SubjectType = ElementOfSet<typeof subjectsSet>;
    • ElementOfSet<typeof subjectsSet> 这里符合内部条件,所以,它最终是一个 Subject 类型
  • 所以,在最后,printSubject 中完美运行

总结

  • infer关键字在TypeScript中为泛型编程提供了一个强大的工具
  • 它不仅增强了类型系统的表达能力,还使开发者能够编写出更加灵活和精确的类型定义
  • 通过掌握infer的使用,你能够在处理复杂类型逻辑和类型转换时更加游刃有余
  • 提升代码的类型安全性和可维护性

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

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

相关文章

三次样条插值的实现(Matlab)

一、问题描述 三次样条插值的实现。 二、实验目的 掌握三次样条插值方法的原理&#xff0c;能够编写代码获得自然、抛物线端点以及非纽结三次样条。 三、实验内容及要求 找出并画出三次样条S&#xff0c;满足S(0) 1, S(1) 3, S(2) 3, S(3) 4, S(4) 2&#xff0c;其中…

Spring Boot 开发 -- 过滤器与拦截器详解

引言 在Web开发中&#xff0c;经常需要对请求进行预处理或在响应后进行后处理&#xff0c;Spring Boot提供了过滤器和拦截器两种机制来实现这一需求。虽然它们都可以用来处理HTTP请求和响应&#xff0c;但在使用场景、执行顺序和配置方式上存在明显的差异。本文将详细讲解Spri…

LeetCode 2928.给小朋友们分糖果 I:Java提交的运行时间超过了61%的用户

【LetMeFly】2928.给小朋友们分糖果 I&#xff1a;Java提交的运行时间超过了61%的用户 力扣题目链接&#xff1a;https://leetcode.cn/problems/distribute-candies-among-children-i/ 给你两个正整数 n 和 limit 。 请你将 n 颗糖果分给 3 位小朋友&#xff0c;确保没有任何…

【面试宝藏】Go基础面试题其一

探索Go语言&#xff1a;特性、用法与最佳实践 Go语言&#xff08;Golang&#xff09;自发布以来迅速成为开发者社区中的热门选择。本文将探讨Go语言的优势、数据类型、包管理、类型转换、并发处理、同步机制、通道特性及其使用中的注意事项等内容&#xff0c;并回答一些常见的…

微信小程序的事件绑定方式

微信小程序的事件绑定方式主要包括以下几种&#xff0c;每种方式都有其特定的用法和特性&#xff1a; 基础绑定方式&#xff1a; bind&#xff1a;这是最基础的绑定方式&#xff0c;用于绑定事件处理函数。例如&#xff0c;bindtap用于绑定点击事件。当组件触发事件时&#xf…

易语言贪吃蛇游戏(附带源码)

易语言贪吃蛇游戏 效果图源码说明源码领取下期更新预报 效果图 源码说明 本源码用易语言来编写&#xff0c;供大家研究&#xff0c;保留版权&#xff0c;谢谢&#xff01; 源码领取 易语言贪吃蛇游戏源码领取地址&#xff1a;https://www.123pan.com/s/ji8kjv-TKPU3.html提取…

Oracle中rman的增量备份使用分享

继上次使用RMAN的全量备份和异机还原以后&#xff0c;开始研究一下增量备份和还原的方法。相比于全量RMAN的备份还原&#xff0c;增量的备份还原就相对简单。本实践教程直接上操作&#xff0c;还是回归到一个问题&#xff0c;就是关于两个数据库创建时候&#xff0c;必须保持or…

泄漏libc基地址

拿libc基地址 方法一&#xff1a;格式化字符串 格式化字符串&#xff0c;首先确定输入的 AAAA 在栈上的位置&#xff08;x&#xff09;。使用 elf.got[fun] 获得got地址。利用格式化字符串&#xff0c;构造payload泄漏got地址处的值&#xff0c;recv接受到的字符串中&#xf…

linux部署运维1——centos7.9离线安装部署web或java项目所需的依赖环境,包括mysql8.0,nginx1.20,redis5.0等工具

在实际项目部署运维过程中&#xff0c;如果是云服务器&#xff0c;基本安装项目所需的依赖环境都是通过yum联网拉取网络资源实现自动化安装的&#xff1b;但是对于一些特殊场合&#xff0c;在没有外部网络的情况下&#xff0c;就无法使用yum命令联网操作&#xff0c;只能通过编…

网络报文协议头学习

vxlan&#xff1a;就是通过Vxlan_header头在原始报文前面套了一层UDPIP&#xff08;4/6&#xff09;Eth_hdr 需求背景&#xff1a;VXLAN&#xff1a;简述VXLAN的概念&#xff0c;网络模型及报文格式_vxlan报文格式-CSDN博客 如果服务器作为VTEP&#xff0c;那从服务器发送到接…

jmeter之MD5加密请求秒杀接口教程

前言&#xff1a; 有时候在项目中&#xff0c;需要使用MD5加密的方法才可以登录&#xff0c;或者在某一个接口中遇到 登录获取token后才可以进行关联&#xff0c;下面介绍下遇到的常见使用 一、第一种方法&#xff1a;使用jmeter自带的函数助手digest 选择工具&#xff0c;选…

并查集拓展(扩展域并查集)

事实证明&#xff0c;扩展域并查集应该在带权并查集前面讲的&#xff0c;因为比较好理解&#xff0c;而且回过头看带权并查集可能也会更轻松一些。 https://www.luogu.com.cn/problem/P1892https://www.luogu.com.cn/problem/P1892 题目描述 现在有 &#x1d45b; 个人&…

矩阵转置(函数)

题目描述 写一个函数&#xff0c;使给定的一个二维数组&#xff08;&#xff13;&#xff13;&#xff09;转置&#xff0c;即行列互换。 输入 一个3x3的矩阵 输出 转置后的矩阵 // 输入示例&#xff1a; 1 2 3 4 5 6 7 8 9 输出示例&#xff1a; 1 4 7 2 5 8 3 6 9…

算法解析——单身狗问题

欢迎来到博主的专栏&#xff1a;算法解析 博主ID代码小豪 文章目录 什么是单身狗问题leetcode_136——只出现一次的数字I使用位运算解决单身狗问题。 leetcode_137——只出现一次的数字II统计二进制数解决单身狗问题leetcode_260 只出现一次数字III分区域按位异或解决问题。 总…

C语言:如何写文档注释、内嵌注释、行块注释?

技术答疑流程 扫描二维码&#xff0c;添加个人微信&#xff1b;支付一半费用&#xff0c;获取答案&#xff1b;如果满意&#xff0c;则支付另一半费用&#xff1b; 知识点费用&#xff1a;10元 项目费用&#xff1a;如果有项目任务外包需求&#xff0c;可以微信私聊

微信小程序怎么注册账号

要注册微信小程序账号&#xff0c;你需要遵循以下步骤&#xff1a; 访问微信公众平台&#xff1a; 首先&#xff0c;你需要访问微信公众平台的官方网站&#xff08;https://mp.weixin.qq.com/&#xff09;。 注册或登录&#xff1a; 如果你已经有一个微信公众平台账号&#xf…

【scikit-learn009】异常检测系列:单类支持向量机(OC-SVM)实战总结(看这篇就够了,已更新)

1.一直以来想写下机器学习训练AI算法的系列文章,作为较火的机器学习框架,也是日常项目开发中常用的一款工具,最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下scikit-learn框架OCSVM模型相关知识体系。 3.欢迎批评指正,欢迎互三,跪谢一键三连! 4.欢迎…

Bev任务issue汇总

1. Bev grid 网格的大小,输入网络的图像的大小,前后左右的感知距离多大? Bev网格大小在通常设置为0.4*0.5; 感知距离:(横向)左右距离(20m);(纵向) -30m(后)~110m(前), 超过110米其实效果就已经很差了,90米距离效果也比较差。 2. 车道线属性分类任务用什么 Loss 车道线检…

Vue3实战笔记(57)—一键换肤:在Vuetify中打造个性化主题切换体验

文章目录 前言一键换肤总结 前言 在当今追求极致用户体验的时代&#xff0c;为应用程序提供个性化的主题切换功能已经成为提升用户满意度和留存率的关键因素之一。Vuetify&#xff0c;作为基于Vue.js的流行前端框架&#xff0c;以其丰富的组件库和高度可定制性&#xff0c;为开…

【保姆级教程】一文弄懂卡方分箱原理及实现代码

风控建模中的分箱方法通常包含有监督分箱和无监督分箱。其中有监督分箱主要包括:卡方分箱和决策树分箱。无监督分箱主要包括:等距分箱、等频分箱和聚类分箱等。    卡方分箱(ChiMerge)是一种基于统计学原理的特征离散化方法。其原理在于通过合并具有相似类分布的相邻区间…