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;
// }

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

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

相关文章

Leetcode—86.分隔链表【中等】

2023每日刷题&#xff08;六十九&#xff09; Leetcode—86.分隔链表 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* partition(struct ListNode* head, int x) {struct ListNode…

C语言操作符if语句好习惯 详解分析操作符(详解4)

各位少年&#xff1a; 前言 还记得我们上一章讲过一个比较抽象的代码&#xff0c;它要比较两次都是真的情况下才能打印&#xff0c;那么很显然这样写代码是有弊端的&#xff1f;哪我们C语言之父丹尼斯.里奇&#xff0c;先介绍一下上次拉掉了if语句的好习惯 好再分享一些操作符…

【基础篇】一、认识JVM

文章目录 1、虚拟机2、Java虚拟机3、JVM的整体结构4、Java代码的执行流程5、JVM的三大功能6、JVM的分类7、JVM的生命周期 1、虚拟机 虚拟机&#xff0c;Virtual Machine&#xff0c;一台虚拟的计算机&#xff0c;用来执行虚拟计算机指令。分为&#xff1a; 系统虚拟机&#x…

结构体的对齐规则

1.引入 我们在掌握了结构体的基本使⽤后。 现在我们深⼊讨论⼀个问题&#xff1a;计算结构体的大小。 这也是⼀个特别热门的考点&#xff1a; 结构体内存对齐。 2.具体分析 ⾸先我们得掌握结构体的对⻬规则&#xff1a; 1. 结构体的第⼀个成员对⻬到和结构体变量起始位置偏移量…

Flutter详解及案例代码

概念 Flutter是由Google开发的开源UI框架&#xff0c;旨在快速构建高质量的移动应用程序。与传统的移动应用开发方式不同&#xff0c;Flutter使用单一代码库构建应用程序&#xff0c;可以同时在iOS和Android上运行。 Flutter的核心是使用Dart语言编写的&#xff0c;并且具有自…

如何解决HTTP 404错误,这里给出详细解决办法

404错误是一个HTTP状态代码,这意味着你试图在网站上访问的页面在他们的服务器上找不到。 需要明确的是,该错误表示虽然服务器本身是可访问的,但显示该错误的特定页面是不可访问的。 个别网站经常自定义这个错误信息。所以,请记住,错误可能会以任何可以想象的方式出现,这…

网络编程--socket编程

这里写目录标题 套接字概念通信原理总结 预备知识网络字节序简介字节转换函数 IP地址转换函数为什么单独列出函数原型sockaddr结构体 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 套接字 概念 Socket本身有插座的意思&#xff0c;但他是进程之间网络通…

解决Qt“报无法定位程序输入点xxx于动态连接库“问题

今天&#xff0c;在使用QtVS2019编译工程时&#xff0c;弹出"无法定位程序输入点xxx于动态链接库"问题&#xff0c;如图(1)所示&#xff1a; 图(1) 报"无法定位程序输入点xxx于动态链接库"问题 出现这种问题的原因有很多&#xff1a; (1) 工程Release/Deb…

Android UID相关知识

一、UID/PID/GID/GIDS的含义和作用 UID : android中uid用于标识一个应用程序&#xff0c;uid在应用安装时被分配&#xff0c;并且在应用存在于手机上期间&#xff0c;都不会改变。一个应用程序只能有一个uid&#xff0c;多个应用可以使用sharedUserId 方式共享同一个uid&#…

Django之按钮(actions)

开篇就是道歉&#xff0c;哈哈哈哈&#xff0c;托更了好久好久&#xff0c;最近太忙了没啥时间更新&#xff0c;各位看官有催更的阔以给我私信哇&#xff0c;希望各位看官给个三连&#xff01;&#xff01;&#xff01;&#x1f60d;&#x1f60d;&#x1f60d;&#x1f60d; …

【环境配置】虚拟环境配置

创建虚拟环境 conda create -n pytorch python3.9安装成功提示 激活虚拟环境 activate pytorch安装pytorch 查看 python 版本——python 退出 python——exit() 对照 python 与 pytorch 的对应关系 pytorch 地址&#xff1a; https://pytorch.org/get-started/previous-…

docker-compose部署openldap

前段时间在本地搭建了一套gitlab geo测试环境&#xff0c;因为需要集成ldap&#xff0c;所以特意搭建下&#xff0c;特此作为笔记记录下。 文章目录 1. 前置条件2. 编写docker-openldap.yml文件3. 登录4. 使用创建组创建用户登录测试 1. 前置条件 安装docker-compose 安装docke…

OpenEuler安装内网穿透工具实现ssh连接openEuler系统

文章目录 1. 本地SSH连接测试2. openEuler安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 本文主要介绍在openEuler中安装Cpolar内网穿透工具实现远程也可以ssh 连接openEuler系统使用. 欧拉操作系统(openEuler, 简称“欧拉”…

CentOS进入单用户模式

一、重启 二、出现内核选项 按“e” 三、编辑这一行 输入 rw init/sysroot/bin/sh 四、进入单用户模式 ctrlx 进入 五、切换目录 chroot /sysroot 六、然后你就操作你的系统了。 修改密码等等

【adb】--- win10 配置 adb环境 超详细 (持续更新中)

在编程的艺术世界里&#xff0c;代码和灵感需要寻找到最佳的交融点&#xff0c;才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里&#xff0c;我们将共同追寻这种完美结合&#xff0c;为未来的世界留下属于我们的独特印记。 【adb】--- win10 配置 adb环境 超详细 &…

(10)Linux冯诺依曼结构操作系统的再次理解

&#x1f4ad; 前言&#xff1a;本章我们首先会明确冯诺依曼体系结构的概念&#xff0c;旨在帮助大家理解体系结构在硬件角度去理解数据流走向的问题。理解完之后我们再去谈操作系统、更多有关操作系统的细节&#xff0c;着重谈谈操作系统概念与定位、操作系统是如何去做管理的…

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

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

【python】python课设 天气预测数据分析及可视化(完整源码)

目录 1. 前言2. 项目结构3. 详细介绍3.1 main.py3.2 GetModel.py3.3 GetData.py3.4 ProcessData.py3.5天气网.html 4. 成果展示 1. 前言 本文介绍了天气预测数据分析及可视化的实现过程使用joblib导入模型和自定义模块GetModel获取模型&#xff0c;输出模型的MAE。使用pyechart…

yolo实现数据增强(数据集不够,快速增加数据集)

目录结构 附上数据增强的全部代码 # -*- codingutf-8 -*-import time import random import copy import cv2 import os import math import numpy as np from skimage.util import random_noise from lxml import etree, objectify import xml.etree.ElementTree as ET imp…

双端队列、优先级队列、阻塞队列

双端队列、优先级队列、阻塞队列 文章目录 双端队列、优先级队列、阻塞队列1 双端队列1.1 概述1.2 应用实例1.2.1 双端链表实现1.2.2 数组实现1.2.3 测试代码 1.3 课后作业- LeeTCode103 2. 优先级队列2.1 概述2.2 基于无序数组实现2.3 基于有序数组实现2.3 堆实现优先级队列2.…