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

相关推荐
To_OC15 小时前
我一直以为 Ajax 是个黑盒,直到我写了这 50 行代码
前端·后端·全栈
用户0595401744615 小时前
RAG 记忆层踩坑实录:用户偏好凭空消失,我排查了 4 小时,最后用 LangChain + Chroma 搭了套自动化回归测试
前端·css
程序猿阿伟15 小时前
《Chrome隔离机制的维度落地指南》
前端·chrome
用户0543243297015 小时前
AI 生成的代码怎么在前端安全预览 + 一键运行:sandbox iframe 实战 🔒
前端
ALianBlank15 小时前
一个 Unity 框架能做多少事?86 个模块 + 21 个小游戏平台
前端·后端·游戏开发
To_OC15 小时前
搞懂二叉树递归遍历,我居然是从爬楼梯开始的
前端·javascript·数据结构
何何____15 小时前
svg基本图形绘制介绍
前端·css
weedsfly15 小时前
Sass 运算 vs CSS calc():你的计算该放在哪一层?
前端
在水一缸15 小时前
重塑前端开发认知:当 AI 遇见 HTML 的“不合理有效性”
前端·人工智能·html·ai编程·claude·前端开发
SwJieJie15 小时前
Webpack vs Vite 构建工程化实战(Vue 项目深度解析)
前端·vue.js·webpack·node.js