• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • keyof 操作符

    对一个对象类型使用keyof操作符,会返回该对象属性名组成的一个字符串或者数字字面量的联合。这个例子中的类型P就等同于"x"| "y"

    type Point = { x: number; y: number };
    type P = keyof Point;
    // type P = keyof Point
    

    但如果这个类型有一个string或者number类型的索引签名,keyof则会直接返回这些类型:

    type Arrayish = { [n: number]: unknown };
    type A = keyof Arrayish;
    // type A = number
    
    type Mapish = { [k: string]: boolean };
    type M = keyof Mapish;
    // type M = string | number
    

    注意在这个例子中,Mstring | number,这是因为 JavaScript 对象的属性名会被强制转为一个字符串,所以obj[0]obj["0"]是一样的。


    数字字面量联合类型

    keyof也可能返回一个数字字面量的联合类型,那什么时候会返回数字字面量联合类型呢,我们可以尝试构建这样一个对象:

    const NumericObject = {
      [1]: "冴羽一号",
      [2]: "冴羽二号",
      [3]: "冴羽三号"
    };
    
    type result = keyof typeof NumericObject
    
    /* typeof NumbericObject 的结果为:
    ** {
    **   1: string;
    **   2: string;
    **   3: string;
    ** }
    */
    
    // type result = 1 | 2 | 3
    


    Symbol

    TypeScript 也可以支持 symbol 类型的属性名:

    const sym1 = Symbol();
    const sym2 = Symbol();
    const sym3 = Symbol();
    
    const symbolToNumberMap = {
      [sym1]: 1,
      [sym2]: 2,
      [sym3]: 3,
    };
    
    type KS = keyof typeof symbolToNumberMap; 
    // typeof sym1 | typeof sym2 | typeof sym3
    

    这也就是为什么当我们在泛型中像下面的例子中使用,会如此报错:

    function useKey<T, K extends keyof T>(o: T, k: K) {
        var name: string = k; 
        // Type 'string | number | symbol' is not assignable to type 'string'.
    }
    

    如果你确定只使用字符串类型的属性名,你可以这样写:

    function useKey<T, K extends Extract<keyof T, string>>(o: T, k: K) {
        var name: string = k;
    }
    

    而如果你要处理所有的属性名,你可以这样写:

    function useKey<T, K extends keyof T>(o: T, k: K) {
        var name: string | number | symbol = k;
    }
    


    类和接口

    对类使用keyof

    class Person {
      name: "冴羽"
    }
    
    type result = keyof Person;
    // type result = "name"
    
    class Person {
      [1]: string = "冴羽";
    }
    
    
    type result = keyof Person;
    // type result = 1
    

    对接口使用keyof

    interface Person {
      name: "string";
    }
    
    type result = keyof Person;
    // type result = "name"
    


    实战

    在「泛型(opens new window)」这篇中就讲到了一个keyof的应用:

    我们希望获取一个对象给定属性名的值,为此,我们需要确保我们不会获取obj上不存在的属性。所以我们在两个类型之间建立一个约束:

    function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
      return obj[key];
    }
     
    let x = { a: 1, b: 2, c: 3, d: 4 };
     
    getProperty(x, "a");
    getProperty(x, "m");
    
    // Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'.
    

    在后面的「映射类型(opens new window)」章节中,我们还会讲到keyof

    上篇:泛型

    下篇:typeof 操作符