TypeScript-keyof 与 in 操作符

前言

keyofin操作符的使用方式看着有些相像,其实有很大的不同,keyof一般对对象类型使用,表示获取对象中的属性名。而in用于对象类型的定义中,右边跟一个联合类型,用来"迭代"联合类型简化对象类型的声明。本章介绍keyof和in操作符的用法,同时记录两个相关的实战案例。

一、keyof操作符的使用

1.1 基本使用

我们如果需要获取对象类型中的属性名,通常需要使用keyof。如下图,key可以使用"name"和"age"进行赋值,但是不能用"sex",因为Person类型中没有定义sex属性。

1.2 对对象索引签名使用

如果对声明了索引签名的对象使用keyof,会直接返回索引签名中的类型:

需要注意的是,如果索引签名的类型是string,那么使用keyof推导出的类型是number|string,原因是js中,使用数字作为属性名会被转换成字符串,SomeType1 和 SomeType"1"是等价的。

1.3 对泛型对象使用

对泛型参数使用keyof时需要注意,在js中允许使用数字、字符串、和Symbol类型来作为属性名,因此对泛型类型和any类型使用keyof时,推导出的类型为string|number|symbol

如果确定了对象只有某个类型的属性名,可以使用Extract关键字将类型提取出来:

1.4 实战

商场做的会员等级分为C、B、A、S四个等级,用户购买之后根据出示的会员卡计算折扣

根据描述我们很容易能写出如下的式子,但是ts会提示discountStrategy有确定的属性名,传入string是不合法的。

这个时候就可以借助keyof来获取discountStrategy的属性名,并声明VIPLevel只属于这个属性名范围:

实现步骤如下:

  1. 我们首先用typeof discountStrategy来获取discountStrategy的类型
  2. 再用keyof获取该类型的所有属性名
  3. 使用extends约束泛型T的对象上需要有discountStrategy的类型对于的属性名
  4. 最后将泛型T赋值给VIPLevel参数

二、in操作符的使用

in操作符比较简单,一般用在对象类型的声明中, 右边跟一个联合类型。常用方法如下:

可以看到,使用了in关键字后,ts自动推断出了CarValue的属性名和类型,不需要我们手动写。

上一章的实战使用in操作符,我们可以进行如下的优化:

实现步骤如下:

  1. 我们首先定义一个VIPLevel联合类型,列举所有会员等级
  2. 再申明一个VIPDiscountStrategy对象类型,使用in操作符来统一定义这个对象的属性值
  3. 最后在calculate函数上将参数VIPLevel的类型声明成VIPLevel联合类型即可实现相同效果

三、综合实战

原题地址: 实现Pick关键字

具体实现:

scala 复制代码
type MyPick<T, K extends keyof T> = {
  [key in K]: T[key];
};

实现思路:

  1. 我们定义两个泛型参数T和K,其中约束K的类型扩展T的属性名
  2. 再用key in K: T[key]来取出Pick出来的属性名

使用示例:

相关推荐
就叫飞六吧36 分钟前
不同站点iframe嵌套种cookie、localstorege.set() 关系
前端
星栈38 分钟前
LiveView 怎么测:从组件测试到端到端,我终于不再只敢手点页面了
前端·前端框架·elixir
蜡台42 分钟前
uniapp vue2 转 vue3
前端·javascript·uni-app·vue3·vue2
Web4Browser44 分钟前
Headless 浏览器自动化适合哪些任务?巡检、截图和提交动作要分级
运维·前端·自动化
用户059540174461 小时前
把前端内存泄漏排查从2小时压到5分钟,我们把它集成进了CI
前端·css
申君健24864182772022 小时前
Vapor 核心数据结构:Block原理
前端
Csvn2 小时前
工程化专题 | 改完组件保存,浏览器毫无反应,重启 dev server 又好了——气不气?
前端
我有满天星辰2 小时前
Vue 指令完全指南:从 Vue 2 到 Vue 3 的演进与实战
前端·javascript·vue.js
光影少年2 小时前
RN 渲染原理:不依赖WebView,原生控件渲染
前端·react native·react.js·前端框架
小白学过的代码2 小时前
# flv.js / mpegts.js 播不了国标摄像头(H.265 + G.711A)?纯前端 Jessibuca 无后端方案(附完整代码)
前端·javascript·h.265