【问题解答】在TypeScript中keyof怎么理解

最新推荐文章于 2025-07-23 15:23:22 发布

原创最新推荐文章于 2025-07-23 15:23:22 发布 · 316 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #ubuntu #javascript

程序员专栏收录该内容

258 篇文章

订阅专栏

文章讲述了如何在JavaScript中使用泛型和`keyof`操作符来确保函数参数的有效性，以及在函数设计中避免不可控输入导致的问题。同时讨论了前端开发的学习资源和面试经验分享，强调理解和实践的重要性。

age: 18,

job: “打杂”,

};

return User[key];

}

const info = getUserInfo(“name”);

console.log(info);

这个代码，抛开TypeScript的部分，只看代码逻辑，应该是没有问题的，我们定义了一个函数，函数根据传入的key返回这个key对应的value值，但是，这里存在一个问题，就是我们输入的key是不可控的，例子中输入的name，在User中是存在的，假如我们输入的是sex，比如：

const info = getUserInfo(“sex”);

console.log(info);

那么此时的Info结果会是undefined，因为在User上是不存在sex这个属性，很显然，这种不可控的因素有点违反了TypeScript的规则，我们实际上希望的是输入的key一定是User上存在的，对于不存在的就要报错，到这里keyof的作用就体现出来了，先看个改写后的例子：

interface User {

name: string;

age: number;

job: string;

}

function getUserInfo(key: T): User[T] {

const User = {

name: “oliver”,

age: 18,

job: “打杂”,

};

return User[key];

}

const info = getUserInfo(“name”);

console.log(info);

在这个改写后的例子中，我们定义了一个接口User，之后对getUserInfo这个方法定义了一个泛型T，这个T的类型直接继承自User的key，按照说的keyof有点循环的意思就在这里，这里的keyof它会去遍历接口User，判断输入的是否存在，存在，那么继续，不存在，那么就报错，之后参数key的类型自然就是泛型的T，函数的返回值类型，就必然是接口User中泛型T所对应的类型；

这么说，能明白不

在这里插入图片描述

现在再来看这个函数，它干了件什么事

function isValidKey(

key: string | number | symbol,

object: object

): key is keyof typeof object {

return key in object;

}

这个isValidKey接收两个参数，第一个类型可能是string | number | symbol，第二个是一个object，它的返回值是一个boolean类型，看的出，true就是key在Object中存在的，false就代表key在object中不存在，难点就在返回值类型这一句中

key is keyof typeof object

key能理解吧，就是参数key，is能理解吧，关键字，做判断用的，keyof，遍历后面的类型，typeof object，就是为了获取object的具体类型；
因此：连起来就是：key是否是存在object的类型中；
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。