ts相关笔记(extends、infer、Pick、Omit)

最近刷了本ts小册,对一些知识点做下笔记。

extends

extends 是一个关键字,用于对类型参数做一些约束。

A extends B 意味着 A 是 B 的子类型,比如下面是成立的

  • ‘abc’ extends string
  • 599 extends number

看下面例子:

type MyType<T extends number> = {
  value: T;
};

const example: MyType<number> = {
  value: 42
};

联合类型子集均为联合类型的子类型,即 1、 1 | 2 是 1 | 2 | 3 | 4 的子类型

type MyType<T extends number | string> = {
  value: T;
};

const example1: MyType<number> = {
  value: 42
};

const example2: MyType<string> = {
  value: 'hello'
};

通过接口进行约束

interface MyInterface {
  length: number;
}

type MyType<T extends MyInterface> = {
  data: T;
};

const example: MyType<string> = {
  data: 'hello' // Error: 'string' does not satisfy the constraint 'MyInterface'
};

const validExample: MyType<{ length: number }> = {
  data: { length: 5 }
};

根据传入的请求码判断请求是否成功

type ResStatus<ResCode extends number> = ResCode extends 10000 | 10001 | 10002
  ? 'success'
  : 'failure';

type Res1 = ResStatus<10000>; // "success"
type Res2 = ResStatus<20000>; // "failure"

type Res3 = ResStatus<'10000'>; // 类型“string”不满足约束“number”。

如果我们想让这个类型别名可以无需显式传入泛型参数也能调用,并且默认情况下是成功地,这样就可以为这个泛型参数声明一个默认值:

type ResStatus<ResCode extends number = 10000> = ResCode extends 10000 | 10001 | 10002
  ? 'success'
  : 'failure';

type Res4 = ResStatus; // "success"

infer

通过 infer 关键字来在 条件类型 中提取类型的 某一部分信息

让 TypeScript 根据上下文自动推断出我们需要的类型,从而简化代码并让类型信息更具灵活性

看下面例子来理解

假设我们有一个条件类型 ExtractReturnType,它接受一个类型参数 T。我们希望当 T 是一个函数类型时,从这个函数类型中提取出它的返回值类型;当 T 不是函数类型时,返回never类型。

type ExtractReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function greet(): string {
  return 'Hello!';
}

现在,我们可以使用 ExtractReturnType 来推断 greet 函数的返回值类型,而不需要显式地声明它:

const result: ExtractReturnType<typeof greet> = 'Hello World';

ExtractReturnType 就会被推断为 string 类型 👇
ExtractReturnType 就会被推断为 string 类型
TypeScript 内置的声明文件es5.d.ts中使用infer举例

  • 获取函数类型中this的参数类型

    type ThisParameterType<T> = 
    T extends (this: infer U, ...args: never) => 
    any ? U : unknown;
    
    
    class Person {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      getName(this: Person): string {
        return this.name;
      }
    }
    
    type testThisType = ThisParameterType<typeof Person.prototype.getName>; // Person
    
  • 从函数类型中移除 this 参数

    type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;
    
    function sayHello(this: { name: string }) {
      console.log(`Hello, ${this.name}!`);
    }
    
    type WithoutThisParam = OmitThisParameter<typeof sayHello>; // () => void
    

    在这里插入图片描述

  • 获取函数类型中参数的类型列表

    type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
    
    function sum(a: number, b: number) {
      return a + b;
    }
    
    type SumParams = Parameters<typeof sum>; // [a: number, b: number]
    

Pick 和 Omit

都是对结构处理的工具类型,Pick 和 Omit 功能相反

先看一下源码实现

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

Pick,它接受两个泛型参数,第一个参数 T 即是我们会进行 结构处理 的 原类型(一般是对象类型),第二个参数 K 则是被约束为 T 类型的 键名联合类型 (就是第一个参数传一个对象,第二个参数传 对象的键 (key),最后获取到一个新对象类型)

Omit ,与Pick相反,Pick 是保留这些传入的键, Omit 则是移除这些传入的键取剩下的

使用举例

interface Foo {
  name: string;
  age: number;
  job: string;
}

type PickedFoo = Pick<Foo, "name" | "age">
// 等同于
// type PickedFoo = {
//     name: string;
//     age: number;
// }
interface Foo {
  name: string;
  age: number;
  job: string;
}

type OmitedFoo = Omit<Foo, 'name'>
// 等同于
// type OmitedFoo = {
//     age: number;
//     job: string;
// }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智能优化算法应用:基于卷积优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于卷积优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于卷积优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.卷积优化算法4.实验参数设定5.算法结果6.…

分享71个Java源码总有一个是你想要的

分享70个Java源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1frK-W3GT8WrydSlQ-E3o6A?pwd6666 提取码&#xff1a;6666 UI代码 def __init__(self):import …

爬虫课程考试方式说明

爬虫课程考试方式说明 一、开课情况 考查课 082116415 50人&#xff0c;0864211&#xff0c;1-15单周 理论学时16 实验学时0 上课地点&#xff1a;周一 3-4节 十号教学楼A303 51人&#xff0c;0864212&#xff0c;1-15单周 理论学时16 实验学时0 上课地点&#xff1a;周四 3-4…

案例分析:三一重工集团数字化转型

三一重工集团&#xff0c;作为制造业中的数字化转型佼佼者&#xff0c;荣获“全球灯塔工厂”的殊荣&#xff0c;率先采用了物联网、云计算、大数据等尖端技术手段。数字化转型让三一重工步入了全面信息化的管理时代&#xff0c;通过ERP、CRM、HRM等系统的协同运作&#xff0c;实…

vs2008编译报错:1>cl: 命令行 error D8016 :“/MTd”和“/clr:oldsyntax”命令行选项不兼容

使用cypress的驱动进行编译&#xff0c;报错如下&#xff1a; 1>------ 已启动全部重新生成: 项目: Streamer, 配置: Debug Win32 ------ 1>正在删除项目“Streamer”(配置“Debug|Win32”)的中间文件和输出文件 1>正在编译... 1>cl: 命令行 warning D9035 :“clr…

【Redis】七、Redis主从复制(重点)

文章目录 1、概念1.1、主从复制的作用主要包括1.2、一般来说&#xff0c;要将Redis运用于工程项目中&#xff0c;只使用一台Redis是万万不能的&#xff08;宕机&#xff09;&#xff0c;原因如下 2、环境配置2.1、复制拷贝3个配置文件&#xff0c;然后修改对应的信息拷贝文件改…

使用tesla gpu 加速大模型,ffmpeg,unity 和 UE等二三维应用

我们知道tesla gpu 没有显示器接口&#xff0c;那么在windows中怎么使用加速unity ue这种三维编辑器呢&#xff0c;答案就是改变注册表来加速相应的三维渲染程序. 1 tesla gpu p40 p100 加速 在windows中使用regedit 来改变 核显配置&#xff0c; 让p100 p40 等等显卡通过核显…

SpringBoot整合Redis完整篇

SpringBoot整合Redis完整篇 1、在springboot项目的pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schem…

RK3588平台开发系列讲解(AI 篇)RKNN 数据结构详解

文章目录 一、rknn_sdk_version二、rknn_input_output_num三、rknn_tensor_attr四、rknn_perf_detail五、rknn_perf_run六、rknn_mem_size七、rknn_tensor_mem八、rknn_input九、rknn_output沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要讲解 RKNN 相关的数…

[kubernetes]Kube-APIServer

API Server API Server是什么 提供集群管理的REST API接口&#xff0c;包括认证授权、数据校验以及集群状态变更等提供其他模块之间的数据交互和通信的枢纽&#xff08;其他模块通过API Server查询或修改数据&#xff0c;只有API Server才直接操作etcd&#xff09; 访问控制…

多组件卡片式问答引擎

#本篇文章联合同花顺人工智能领域开发者严同学创作 1.简介 为了满足用户个性化需求以及精细化运营&#xff0c;越来越多的企业推出多组件式的卡片问答&#xff0c;这种回答方式不会千篇一律&#xff0c;能够更好地为客户提供服务&#xff0c;帮助客户解决问题。 使用这种问答…

“React学习之旅:从入门到精通的点滴感悟“

在探索和学习React的过程中&#xff0c;我逐渐领悟到了前端开发的魅力与挑战。React&#xff0c;作为Facebook推出的开源JavaScript库&#xff0c;以其独特的思维方式和强大的功能&#xff0c;引领着前端开发的潮流。在这篇文章中&#xff0c;我将分享我的React学习心得&#x…

一个int型有序数组,如何拿到最低的值和这个值一共存在多少个?

一个int型有序数组&#xff0c;如何拿到最低的值和这个值一共存在多少个&#xff1f; 示例代码&#xff1a; int min 0;int os 1;int[] element {5,4,4,2,2};for (int i : element) {if (i min) {os;} else {min i;os 1;}}System.out.println("min " min);S…

PortSwigger Access Control

lab1: Unprotected admin functionality 访问robots.txt 进了删除即可 lab2: Unprotected admin functionality with unpredictable URL 访问admin-d0qwj5 lab3: User role controlled by request parameter 发现Cookie中存在判断是否为admin lab4: User role can be modifie…

test assert-01-Google Truth 断言

Truth Truth 是用于Java测试的断言框架&#xff0c;灵感来自于FEST&#xff0c;并受到一些可扩展性需求的驱动&#xff0c;几乎完全由谷歌员工在业余时间编写&#xff0c;或者作为Java核心图书馆管理员的身份做出贡献。 作用 作为工程师&#xff0c;我们花费大部分的时间来阅…

【RocketMQ笔记01】安装RocketMQ消息队列运行环境

这篇文章&#xff0c;主要介绍如何安装RocketMQ消息队列运行环境。 目录 一、RocketMQ消息队列 1.1、下载RocketMQ 1.2、解压安装包 1.3、配置RocketMQ环境变量 1.4、修改启动脚本 1.5、启动RocketMQ &#xff08;1&#xff09;启动NameServer &#xff08;2&#xff0…

11.1Linux串口应用程序开发

UART简介 UART的全称是Universal Asynchronous Receiver and Transmitter&#xff0c;即异步发送和接收。 串口在嵌入式中用途非常的广泛&#xff0c;主要的用途有&#xff1a; 打印调试信息&#xff1b;外接各种模块&#xff1a;GPS、蓝牙&#xff1b; 串口因为结构简单、稳…

mybatis缓存详解,一级缓存和二级缓存举例讲解

文章目录 mybatis缓存详解&#xff0c;一级缓存和二级缓存举例讲解1、一级缓存1.1、同一个sqlsession对象的不同mapper对象之间的缓存使用debug运行查看cache缓存 1.2、不同sqlsession对象下的不同mapper对象的缓存使用debug运行查看cache缓存 1.3、同一个sqlsession对象下一级…

【Java】SpringBoot快速整合Kafka

目录 1.什么是Kafka&#xff1f; 主要特点和概念&#xff1a; 主要组成部分&#xff1a; 2.Kafka可以用来做什么&#xff1f; 3.SpringBoot整合Kafka步骤&#xff1a; 1. 添加依赖: 2. 配置 Kafka: 3. 创建 Kafka 生产者: 4. 创建 Kafka 消费者: 5. 发布消息: 6. 使…

【基础篇】二、字节码文件的组成 Arthas + jclasslib +javap

文章目录 1、jclasslib工具2、基础信息部分3、常量池部分4、方法部分&#xff08;从字节码指令看i&#xff09;5、三种1操作的性能对比6、javap -v命令7、jclasslib插件8、Arthas 1、jclasslib工具 字节码文件中保存的是源代码编译后的内容&#xff0c;以二进制方式存储&#…