typescript 中的keyof、 in

拼搏现实的明天。 2022-08-31 06:58 128阅读 0赞

原文链接：[https://juejin.cn/post/6844904145732763655\#heading-0][https_juejin.cn_post_6844904145732763655_heading-0]

## keyof ##

### 定义 ###

keyof与Object.keys略有相似，只是 **keyof 是取 interface 的键**，**而且 keyof 取到键后会保存为联合类型。**

interface iUserInfo {
      name: string;
      age: number;
    }
    type keys = keyof iUserInfo;

![25c1ce59442978ffe6d81661f5587d53.png][]

### keyof 的简单栗子 ###

我们有这样一个需求，实现一个函数 getValue 取得对象的 value。在未接触 keyof 时，我们一般会这样写：

function getValue(o: object, key: string) {
      return o[key];
    }
    const obj1 = { name: '张三', age: 18 };
    const name = getValue(obj1, 'name');

但是，这样写就丧失了 ts 的优势：

*  无法确定返回值类型
 *  无法对 key 进行约束，可能会犯拼写的错误

这时我们可以使用 keyof 来增强 getValue 函数的类型功能。

![5a5d1adf4fe76b902c2681917a29afd3.png][]

使用 keyof 后我们可以看到，可以完整的提示可以输入的值，当拼写错误时也会有清晰的提示。

![eff6eabcd86a788075c6b98803342177.png][]

function getValue<T extends Object, K extends keyof T>(o: T, key: K): T[K] {
      return o[key];
    }
    
    const obj1 = { name: '张三', age: 18 };
    const a = getValue(obj1, 'hh');

## in ##

**in用于取联合类型的值。主要用于数组和对象的构造。**

**但切记不要用于 interface，否则会出错**

type name = 'firstName' | 'lastName';
    type TName = {
      [key in name]: string;
    };

![01fa08518ac4829f4da7e2e786940952.png][]

const data1 = [
      {
        a1: 'a',
        b1: 'b',
        c1: 'c',
        d1: 'd',
      },
    ];
    
    const data2 = [
      {
        a2: 'a',
        b2: 'b',
      },
    ];

![e318bc67c09ca63748284ad4e0844b38.png][]

[https_juejin.cn_post_6844904145732763655_heading-0]: https://juejin.cn/post/6844904145732763655#heading-0
[25c1ce59442978ffe6d81661f5587d53.png]: /images/20220829/ddc0cc61b6a34f9082a01074ff07f386.png
[5a5d1adf4fe76b902c2681917a29afd3.png]: /images/20220829/c6476fbad31d4d6d8a82dfab0aba1384.png
[eff6eabcd86a788075c6b98803342177.png]: /images/20220829/521b9eeb0ada4305a9901b6ed4baa544.png
[01fa08518ac4829f4da7e2e786940952.png]: /images/20220829/c41b2c76b21d4f7db33d7a0de3c84317.png
[e318bc67c09ca63748284ad4e0844b38.png]: /images/20220829/9e4428081a564bea9eec36b85bb140b2.png