浅谈typescript中keyof与typeof操作符用法

当谈到TypeScript的类型系统时，我们经常听到keyof和typeof这两个操作符。这两个操作符的使用可以帮助我们更好地进行类型推断和类型检查。本文将详细讲解这两个操作符的用法以及它们在TypeScript中的常见应用。

keyof操作符

keyof操作符用于获取一个对象类型的所有键名，以联合类型的形式返回。它经常与泛型结合使用，可以在编译期进行类型检查。

interface Person {
  name: string;
  age: number;
  gender: 'male' | 'female';
}

type PersonKeys = keyof Person;
// 等价于 type PersonKeys = 'name' | 'age' | 'gender'

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

const person: Person = { name: '张三', age: 20, gender: 'male' };

getProperty(person, 'name'); // 返回 '张三'
getProperty(person, 'age'); // 返回 20
getProperty(person, 'gender'); // 返回 'male'
getProperty(person, 'email'); // 编译错误，因为 'email' 不是 Person 的键名

上述代码中，我们定义了一个Person类型的接口，获取了它的所有键名，并定义了一个通用的getProperty函数，该函数接受两个参数：obj和key，其中obj代表一个对象，key则代表obj的键名。在函数体中，我们通过键名来读取obj中对应的属性值，并返回该值。

需要注意的是，在定义函数getProperty时，我们使用了keyof操作符来约束泛型K的取值范围，这样可以确保我们传入的key参数一定是obj的键名之一。

在使用keyof时，我们还可以将它与typeof操作符结合使用。例如：

const person = { name: '张三', age: 20, gender: 'male' };

type PersonKeys = keyof typeof person;
// 等价于 type PersonKeys = 'name' | 'age' | 'gender'

上述代码中，我们定义了一个person对象，然后使用typeof操作符获取了它的类型，之后再使用keyof操作符获取了它的所有键名，最终得到了一个PersonKeys类型。需要注意的是，我们必须使用typeof操作符来获取一个对象的类型，否则keyof操作符将无法工作。

typeof操作符

typeof操作符用于获取一个值的类型，在TypeScript中，typeof返回的类型与JavaScript中的typeof返回的类型基本相同，但对于一些复杂类型，它们的表现可能会有所不同。

const person = { name: '张三', age: 20, gender: 'male' };

type PersonType = typeof person;
// 等价于 interface PersonType { name: string; age: number; gender: 'male' | 'female' }

上述代码中，我们定义了一个person对象，然后使用typeof操作符获取了它的类型，并将其赋值给变量PersonType。我们可以看到，PersonType的类型与person对象的类型相同，它们都包含了name、age和gender三个属性。

需要注意的是，typeof操作符并不能获取一个接口的类型定义，例如：

interface Person {
  name: string;
  age: number;
  gender: 'male' | 'female';
}

type PersonType = typeof Person; // 编译错误，因为typeof操作符不能获取接口的类型定义

在大多数情况下，我们使用typeof操作符来获取变量的类型。但有时，我们希望获取一个类的实例类型，这时我们可以使用instanceof操作符。例如：

class Person {
  name: string;
  age: number;
  gender: 'male' | 'female';

  constructor(name: string, age: number, gender: 'male' | 'female') {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

const person = new Person('张三', 20, 'male');

type PersonType = typeof person; // 编译错误，因为typeof操作符不能获取类的实例类型

if (person instanceof Person) {
  type PersonType = typeof person;
  // 等价于 interface PersonType { name: string; age: number; gender: 'male' | 'female' }
}

在上述代码中，我们定义了一个Person类，并创建了一个person实例。由于typeof操作符不能获取类的实例类型，我们用instanceof操作符来判断person是否为Person类的实例，并在if语句中定义了一个PersonType类型来表示person的类型。需要注意的是，在使用instanceof操作符时，我们必须将类型定义放在if语句中，否则编译器将无法进行类型检查。

综上所述，keyof和typeof操作符是TypeScript中两个重要的类型操作符，它们的使用可以帮助我们更好地进行类型推断和类型检查。