keyof和infer

keyof

keyof是ts中的操作符,用于获取一个类型的所有键名组成的联合类型,在处理对象类型和泛型时特别有用。

1、比如一个函数,第一个参数接收对象,第二个参数需要是前面对象的属性名,这时要约束第二个参数就能用keyof了,下面是代码示例:

TypeScript 复制代码
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person: Person = {
  name: "张三",
  age: 30,
  address: "北京"
};

const name = getProperty(person, "name"); // 类型为 string
const age = getProperty(person, "age");   // 类型为 number
getProperty(person, "job");  // 错误:参数"job"不能赋给类型"keyof Person"的参数

infer

infer用于条件类型中进行占位,我们可以用来提取函数的返回类型

1、提取函数返回类型。

定义类型ReturnType,infer R表示函数类型的返回值,泛型满足函数类型的条件时ReturnType的类型就是函数返回值的类型,代码示例如下:

TypeScript 复制代码
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

function greet(): string {
    return "Hello, World!";
}

type GreetReturn = ReturnType<typeof greet>; // string

END

相关推荐
FungLeo12 小时前
成为全栈·Vue管理后台篇·<scriptsetup>:把页面拆成可读、可测的 Vue 组件
前端·javascript·vue.js·typescript·前端组件化·composition api·vue sfc
卸任1 天前
Vibe coding工具使用心得
前端·ai编程
brien91 天前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance1 天前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M1 天前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写1 天前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李1 天前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易1 天前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马1 天前
前沿视界
前端
kyriewen1 天前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员