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

相关推荐
IT_陈寒10 分钟前
Vue的这个响应式陷阱,我调试了一整天才爬出来
前端·人工智能·后端
莪_幻尘11 分钟前
手把手书写你的第一个 AI Skill:从原则到工程化
前端·agent·ai编程
lpfasd12311 分钟前
2025-2026前端3D展示技术发展全景
前端·3d
JR空位投 李佃贵是16 分钟前
如何编写轻量级 CSS 框架
前端·css·tensorflow
白猫不黑31 分钟前
Web 应用中“敏感信息泄露“的常见位置?
前端·网络·web安全·网络安全·信息安全·渗透测试
张风捷特烈37 分钟前
Flutter UI 解耦 - 天下大势,合久必分, 分久必合
android·前端·flutter
meilindehuzi_a2 小时前
Vue3组件样式隔离与组件通信实战:从 scoped、props 校验到记事本应用
前端·javascript·vue.js
LaughingZhu2 小时前
Product Hunt 每日热榜 | 2026-07-28
前端·神经网络·react.js·搜索引擎·前端框架
陈随易9 小时前
在 VSCode 里,把项目一键部署到服务器
前端·后端·程序员
Highcharts.js9 小时前
教程:基于 React + Highcharts 构建一个单页应用程序、按需数据拉取与图表渲染
开发语言·前端·数据结构·react.js·前端框架·highcharts·页面应用