泛型工具类型和操作符

news2025/3/14 12:09:15

前言

 TypeScript 内置了一些常用的工具类型。

  • Partial
  • Required
  • Omit
  • Pick
  • ....

操作符

       typeof

        typeof 操作符可以用来获取一个变量声明或对象的类型

const p = {x:2,y:'cm'}
let g:typeof p = {x:3,y:'ff'}

        这里g需要满足:

  •  有x属性且值是number类型
  •  有y属性且值是string类型

        再来看个应用的例子:

function toArray(x: number): number[] {
  return [x];
}
type Func = typeof toArray; 

        此时通过写轮眼typeof复制过来的Func类型是这样的:

         (x: number) => number[]

         我们把这个Func类型用起来

function myFn(cb: Func) :void {
  cb()
}

        这样是会报错的,为什么,因为Func传入number类型参数,返回一个数字数组,所以我们要:

function myFn(cb: Func) :void {
  cb(3)
}

        

        keyof

        keyof 操作符可以用来一个对象中的所有 key 值:

interface Person {
    name: string;
    age: number;
}

type K1 = keyof Person; // "name" | "age"

       如果是数组,则返回:

type K2 = keyof Person[]; // "length" | "toString" | "pop" | "push" | "concat" | "join" 

        注意这里只能用type类型变量而不是普通变量。

        

         这个操作符看起来有啥用呢?来看这个例子:

type dataObj = {
    name:string,
    score: number
}
type typeKey = keyof dataObj;

        我们把objType直接拿来用:

        再来看个例子:

        用ts定义一个获取对象属性值的方法

        要获取对象的属性值,必须传入对象和属性名

function xxx(obj,key) {}

        约束传参,obj必须是对象类型,key必须是obj的键名

function xxx<T extends object, K extends keyof T> (obj: T, key: K) {}

        书写函数体:

function xxx<T extends object, K extends keyof T> (obj: T, key: K) { return obj[key] } 

         完整代码:


function getValue<T extends object, K extends keyof T> (obj: T, key: K) {
  return obj[key]
}

const obj = {
	name: 'test',
	age: 18
}

getValue(obj, 'name')
getValue(obj, 'age')

 

        in遍历

        in 用来遍历枚举类型:

type xxx = 'name' | 'age'
type Obj = {
    [key in xxx]: any
}

        extend

        有时候我们定义的泛型不想过于灵活或者说想继承某些类等,可以通过 extends 关键字添加泛型约束。

interface aaa {
  length: number;
}

function xxx<T extends aaa>(arg: T): T {
  console.log(arg.length);
  return arg;
}

        

工具类型

        Partial

       在使用时可以将任意类型作为参数传递给它,然后返回一个新的类型,该类型包含了原类型中的所有属性,但所有属性都变成了可选的。

interface User {
  name: string;
  age: number;
  email: string;
}

        使用 Partial<User> 可以生成以下的类型:

{
  name?: string | undefined;
  age?: number | undefined;
  email?: string | undefined;
}

        看一个完整的例子:

interface Todo {
    title: string;
    description: string;
  }
  
function updateTodo(todo: Todo, newTodo: Partial<Todo>) {
    return { ...todo, ...newTodo };
}
  
const todo2 = updateTodo({title:'杂志',description:'这是一个本杂志'}, {
    description: "我没有标题",
});

        Required

        Required将类型中所有选项变为必选,去除所有?

interface Contact{
  name?: string; // 姓名
  phone?: string; // 手机号
}
function dbb (axx:Required<Contact>){console.log(axx)}
dbb({name:'11',phone:'132'})

        直接赋值给新的type也行

type newContact = Required<Contact>
let hgd :newContact = {name:'33'}

         Pick

         可以从一个对象类型中 取出某些属性

        语法: Pick<对象类型,属性1 | 属性2,  ....>

interface User {
    account: string
    avatar: string
    id: string
    mobile: string
    token: string
}

type customUser = Pick<User,'id'|'token'|'mobile'>
// 结果:PickUserTest === {id: string,token: string, mobile:string}

        

        Omit 

         Omit 可以从一个对象类型中 排除某些属性

        语法:Omit<对象类型,属性1 | 属性2,  ....>

type customUser2= Omit<User,'id'|'token'|'mobile'>
let xxx:customUser2 = { account: 'agggg',avatar:'png'}

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

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

相关文章

海鲜进口一站式数字化管理,提高工作效率

2022年&#xff0c;中国水产品进口国top10有&#xff1a;厄瓜多尔&#xff08;主要品种为白虾、剑鱼、沙丁鱼、金枪鱼等&#xff09;、俄罗斯&#xff08;主要品种为鳕鱼、鲑鱼、鲱鱼等&#xff09;、越南&#xff08;主要品种为巴沙鱼、冻虾等&#xff09;、印度&#xff08;主…

认识HTTP请求

要分析HTTP请求和响应必然少不了抓包工具&#xff0c;关于抓包工具的设置和下载推荐看抓包工具Fiddler的下载与设置 通过抓包得到的一个HTTP请求 HTTP请求的格式 结构分析 一.请求行 1.post是方法&#xff0c;可以表示一条HTTP请求要进行的操作是什么&#xff0c;post通常表示…

使用终端MobaXterm连接Centos

1. 下载MobaXterm 官网&#xff1a; https://mobaxterm.mobatek.net/download.html 2. MobaXterm连接Linux 1 、查看刚才安装的 Linux 的 IP 地址 2、连接 3. Linux自带了JRE 由于javac指令不能运行&#xff0c;所以Linux只自带了JRE&#xff01;&#xff01;&#xff01;

【C++】- set和map的具体使用(multiset和multimap的介绍)

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

error:Failed building wheel for XXX

解决方案适用于大多数的pip 安装时出现的Failed building wheel for XXX 出现问题 按以往快速安装包的经验&#xff0c;第一反应当然是使用简单又快捷的terminal命令加上镜像&#xff0c;如下&#xff1a; pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple结…

群晖Cloud Sync数据同步到百度云、另一台群晖、nextcloud教程

群晖Cloud Sync数据同步到百度云、另一台群晖、nextcloud教程 一、群晖套件中下载Cloud Sync 二、同步到百度云盘 打开Cloud Sync&#xff0c;点击左上角的号&#xff0c;云供应商选择百度云。 这里可以选择双向备份&#xff0c;也可以只上穿到百度云的仅上传本地更改。因为百…

D盘无法格式化?3个方法!轻松解决问题!

“我的电脑d盘好像中病毒了&#xff0c;我想将它格式化但是每次操作都显示d盘无法格式化。这是为什么呢&#xff1f;我应该怎么解决&#xff1f;” 有时候&#xff0c;我们的电脑可能会出现一些问题&#xff0c;导致我们不得不将某些磁盘进行格式化操作。这时候问题就出现了。有…

CSP 202005-1 重复局面

题目背景 国际象棋在对局时&#xff0c;同一局面连续或间断出现3次或3次以上&#xff0c;可由任意一方提出和棋。 问题描述 国际象棋每一个局面可以用大小为 的字符数组来表示&#xff0c;其中每一位对应棋盘上的一个格子。六种棋子王、后、车、象、马、兵分别用字母 k、q、…

Polarion导入需求(Word)

简介 将需求文档导入Polarion并实现自动创建工作项具有多个优势&#xff0c;这些优势有助于提高项目管理和协作的效率&#xff0c;以下是一些主要的优势点&#xff1a;减少手动工作&#xff1a; 自动创建工作项可以显著减少手动数据输入的工作量。不再需要手动逐一创建每个工作…

聚类-kmeans

聚类算法是无监督学习算法&#xff0c;指定将数据分成k个簇。然后通过每个点到各个簇的中心的欧氏距离来分类。 kmeans本身会陷入局部最小值的状况&#xff0c;二分kmeans可以解决这一点。 二分kmeans是遍历所有的簇&#xff0c;将其分成2个&#xff0c;比较哪一个分裂结果更…

2023年7月京东休闲食品行业品牌销售排行榜(京东大数据)

鲸参谋监测的京东平台7月份休闲食品市场销售数据已出炉&#xff01; 根据鲸参谋平台的数据显示&#xff0c;7月份休闲食品市场整体呈现下滑趋势。当月休闲食品在京东平台的销量为3400万&#xff0c;环比下降约26%&#xff0c;同比下降约26%&#xff1b;销售额将近11亿&#xf…

Equall Apple 的革命性变压器:一个宽幅前馈,实现前所未有的效率和精度

变压器架构已显示出显著的可扩展性&#xff0c;从而大大提高了精度。然而&#xff0c;这种进步是以极高的计算要求为代价的&#xff0c;这已成为实际应用中的重大障碍。 尽管研究人员一直在积极寻求解决方案来减小变压器组件的尺寸并修剪注意力头等元素&#xff0c;但另一个关…

自动化测试01

测试脚本编写参考 selenium IDE 插件&#xff0c;firefox浏览器搜索安装&#xff0c;&#xff08;无法安装&#xff09; katalon recorder 负责输出脚本&#xff0c;输出模式&#xff0c;python2unitest &#xff0c; 无法输出python3类型脚本&#xff0c;仅参考 开发者工具 …

Ubuntu安装Android Studio

一、Android Studio安装 官方教程&#xff1a;安装 Android Studio | Android Developers 1、下载&#xff1a;Download Android Studio & App Tools - Android Developers&#xff0c;选择linux版本 2、 提取/解压 将下载的安装包提取出来 3、 64位ubuntu系统&#…

三分钟创建扫码查分系统

学生考试的成绩是家长和学生关注的重要问题。传统的成绩查询方式往往需要将整个成绩表格发到群里&#xff0c;不仅操作繁琐&#xff0c;而且可能导致信息泄露。为了解决这个问题&#xff0c;易查分应运而生。易查分是一个可以将Excel表格转换为在线查询的工具&#xff0c;可以轻…

Python——操作MySQL数据库

&#x1f60a;Python——操作MySQL数据库 &#x1f680;前言&#x1f50d;数据库编程&#x1f36d;数据库编程基本介绍&#x1f36d;数据库编程接口&#x1f36d;什么情况下会使用Python操作MySQL数据库&#xff1f;&#x1f36d;Java和Python操作MySQL数据库有何不同&#xff…

基于Python开发的AI智能联系人管理程序(源码+可执行程序+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python开发的AI智能联系人管理程序&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#…

我的个人网站——宏夏Coding上线啦

网站地址&#xff1a;宏夏Coding Github地址&#xff1a;&#x1f525;&#x1f525;宏夏coding网站&#xff0c;致力于为编程学习者、互联网求职者提供最需要的内容&#xff01;网站内容包括求职秘籍&#xff0c;葵花宝典&#xff08;学习笔记&#xff09;&#xff0c;资源推…

核心实验18_ospf高级_ENSP

项目场景&#xff1a; 核心实验18_ospf高级_ENSP 多区域虚链路 实搭拓扑图&#xff1a; 具体操作&#xff1a; R1: [R1]ospf 1 router-id 1.1.1.1 [R1-ospf-1]area 0 [R1-ospf-1-area-0.0.0.0]net 1.1.1.0 0.0.0.255 [R1-ospf-1-area-0.0.0.0]net 10.1.12.0 0.0.0.255 [R1-os…

苹果电脑显示器校准推荐 BetterDisplay Pro for Mac

BetterDisplay Pro是一款Mac平台上的显示器校准软件&#xff0c;可以帮助用户调整显示器的颜色和亮度&#xff0c;以获得更加真实、清晰和舒适的视觉体验。 以下是BetterDisplay Pro的主要特点&#xff1a; - 显示器校准&#xff1a;可以根据不同的需求和环境条件调整显示器的颜…