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

介绍

今天有个小伙伴留言问，keyof怎么使用，然后贴了一段代码，希望能帮忙解读一下，我看了下恰好还是能帮到的，为了防止误导，查了点资料并且整理了一下，然后发出来希望能帮到更多的小伙伴；

问题

问题是这个小伙伴没有弄明白keyof是怎么使用的，场景是使用函数获取对象里属性的值的时候报错了，错误提示如下：

元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型 “{ name: string; age: number; job: string; }”。
在类型 “{ name: string; age: number; job: string; }” 上找不到具有类型为 “string” 的参数的索引签名。

出现错误后，百度查了结果，根据网上的结果，加了一个判断，之后就不报错了，网上判断代码如下

function isValidKey(
    key: string | number | symbol,
    object: object
): key is keyof typeof object {
    return key in object;
}

并且，这段代码也不知道是什么意思，希望能帮忙解答一下；

解答

首先，keyof这是一个关键字，它在Typescript中代表遍历的意思，不过遍历的是类型，直接看个例子吧

function getUserInfo(key: string) {
    const User = {
        name: "oliver",
        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<T extends keyof User>(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的类型中；

好了，解答到这里结束了，有问题的小伙伴欢迎留言…