TypeScript高级类型-Partial

TypeScript高级类型-PartialTypeScript高级类型-Partial预备知识:TypeScript类型系统接口泛型先来看一下Partial类型的定义/***MakeallpropertiesinToptional*/typePartial<T>={[PinkeyofT]?:T[P];};假设我们有一个定义user的接口,如下int…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

TypeScript高级类型-Partial

预备知识:

TypeScript类型系统
接口
泛型

先来看一下 Partial 类型的定义

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

Jetbrains全家桶1年46,售后保障稳定

假设我们有一个定义 user 的接口,如下

interface IUser {
  name: string
  age: number
  department: string
}

经过 Partial 类型转化后得到

type optional = Partial<IUser>

// optional的结果如下
type optional = {
    name?: string | undefined;
    age?: number | undefined;
    department?: string | undefined;
}

那么 Partial<T> 是如何实现类型转化的呢?

  1. 遍历入参 T ,获得每一对 key, value

  2. 将每一对中的 key 变为可选,即添加 ?

  3. 希望得到的是由 key, value 组成的新类型

以上对应到 TypeScript 中是如何实现的呢?

对照最开始 Partial 的类型定义,能够捕捉到以下重要信息

  • keyof 是干什么的?

  • in 是干什么的?

  • [P in keyof T] 中括号是干什么的?

  • ? 是将该属性变为可选属性

  • T[P] 是干什么的?

keyof

keyof,即 索引类型查询操作符,我们可以将 keyof 作用于泛型 T 上来获取泛型 T 上的所有 public 属性名构成的 联合类型

注意:”public、protected、private”修饰符不可出现在类型成员上

例如:

type unionKey = keyof IUser

// unionKey 结果如下,其获得了接口类型 IUser 中的所有属性名组成的联合类型
type unionKey = "name" | "age" | "department"

in

我们需要遍历 IUser ,这时候 映射类型就可以用上了,其语法为 [P in Keys]

  • P:类型变量,依次绑定到每个属性上,对应每个属性名的类型
  • Keys:字符串字面量构成的联合类型,表示一组属性名(的类型),可以联想到上文 keyof 的作用

上述问题中 [P in keyof T] 中括号是干什么的?这里也就很清晰了。

T[P]

我们可以通过 keyof 查询索引类型的属性名,那么如何获取属性名对应的属性值类型呢?

这里就用到了 索引访问操作符,与 JavaScript 种访问属性值的操作类似,访问类型的操作符也是通过 [] 来访问的,即 T[P],其中”中括号“中的 P[P in keyof T] 中的 P 相对应。

例如

type unionKey = keyof IUser // "name" | "age" | "department"

type values = IUser[unionKey] // string | number 属性值类型组成的联合类型

最后我们希望得到的是由多个 key, value 组成的新类型,故而在 [P in keyof T]?: T[P]; 外部包上一层大括号。

到此我们解决遇到的所有问题,只需要逐步代入到 Partial 类型定义中即可。


总结:

  1. 针对高级类型的编写,我们可以尝试将其以 JavaScript 的代码方式表述出来,然后使用 TypeScript 对其进行实现。
  2. 在每一个小步骤中遇到不懂的,可以结合最后的结果进行比对(比如本文中 Partial 的类型定义),发现问题点在哪里,然后针对性查证并解决。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/219080.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 电商网站的价格大概多少钱一个_电子商务网站报价

    电商网站的价格大概多少钱一个_电子商务网站报价做一个电商网站需要多少钱?一、服务器购买、微信公众号认证、短信接口、物流接口、第三方支付接口费率等等。拿服务器来说,有一般IDC公司的虚拟主机,云虚拟主机、独立ECS,价格会有天壤之别,那具体根据您后期访问用户量和稳定性本身来选择,,几百到几千不等。二、功能开发费用电商平台的主要费用就是根据用户需要哪些功能进行定制开发来评估费用的,这其实又大致分为两大类。第一,必备功能。电商平台里面的必备功能有:会员注册登录、商品分类展示、在线支付购物车、订单管理等。第二、体验功能。体验功能主要是便于电商平台

  • vuecli3配置webpack_vuecli webpack配置

    vuecli3配置webpack_vuecli webpack配置前言如果我们想在webpack中使用vue,就需要在webpack中配置vue配置vue首先,我们需要在项目中安装vue,安装命令如下:npminstallvue–save安装完成后

  • 小米刷原生android系统下载地址,小米6刷原生安卓8.0下载|小米6刷原生安卓p 免费版_附教程_最火软件站…

    小米刷原生android系统下载地址,小米6刷原生安卓8.0下载|小米6刷原生安卓p 免费版_附教程_最火软件站…小米6刷原生安卓系统是一款专门为小米6手机整理的刷机包,利用这款工具可以帮助小米6手机用户将自己的手机系统升级为原生安卓8.0、9.0等,让手机使用更加的方便,需要的用户快来最火网站下载吧!小米6刷原生安卓8.0简介小米6刷安卓9.0文件是为小米6用户提供的刷最新的安卓系统所需的文件,18年上线的安卓系统对于很多安卓粉丝来说还是很有吸引力的,如果你手上正好有一台小米6手机,可来下载这款文件来将自己…

  • invoke方法的使用

    invoke方法的使用

  • int对应的jdbctype_java clob类型

    int对应的jdbctype_java clob类型在Oracle中有些字段不是必填时在用户使用的时候会出现数据null的情况。这个时候在Oracle中是无法进行插入的。JDBCTypeJavaTypeCHARStringVARCHARStringLONGVARCHARStringNUMERICjava.math.BigD…

    2022年10月20日
  • zabbix集成onealert验证报错:create media type failed! error message[通俗易懂]

    zabbix集成onealert验证报错:create media type failed! error message[通俗易懂]zabbix集成onealert验证报错:createmediatypefailed!errormessage一、报错详细信息[root@host-10-101-16-202bin]#bashinstall.sh1841b33f-1c97-1ae5-7dc2-e5a411b9eabfstarttocreateconfigfile…Zabbix管理地址:h…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号