TypeScript基本类型之typeof和keyof详解

在TypeScript中，typeof和keyof是两个非常重要的基本类型运算符。typeof可用于获取变量的类型，而keyof可用于获取对象类型的键类型。

typeof

typeof可用于获取变量的类型，其语法为：

typeof x

这里的x可以是任意类型的变量、对象或函数，返回结果为x的类型。

示例1

let x = 10;
let y: typeof x = 20;
console.log(y); //20

在上面的例子中，我们定义了变量x，并将其赋值为10。然后我们定义变量y，并将其类型设为typeof x。这时，y的类型就会被自动推导为number，因为x是一个number类型的变量。

示例2

function foo(x: string): string {
  return x + '!';
}

let y: typeof foo = (x: string): string => {
  return x + '?';
}

console.log(foo('hello')); //hello!
console.log(y('hello')); //hello?

在上面的例子中，我们定义了函数foo，并将其类型设为(x: string) => string，即一个接收一个string类型参数并返回一个string类型结果的函数。

然后我们定义变量y，并将其类型设为typeof foo。这时，y的类型就会被自动推导为(x: string) => string，与foo的类型相同。然后我们用一个箭头函数表达式实现了一个与foo具有相同类型的函数，再将其赋值给了y。最后我们打印出foo和y的结果，可以发现它们分别输出"hello!"和"hello?"。

keyof

keyof可用于获取对象类型的键类型，其语法为：

keyof T

这里的T是一个对象或类类型，返回结果为T的键类型。

示例1

interface Person {
  name: string;
  age: number;
}

let x: keyof Person = 'name';
let y: keyof Person = 'age';
let z: keyof Person = 'email'; //编译错误：类型 '"email"' 的值不能赋给类型 '"name" | "age"'。

在上面的例子中，我们定义了一个接口类型Person，包含两个属性name和age。然后我们定义了三个变量：x、y、z，它们的类型都是keyof Person，即T的键类型。

我们可以发现，变量x的值为"name"，变量y的值为"age"，而变量z的值为"email"，因为"email"并不是Person类型的键，所以它会被TypeScript认为是一个错误。

示例2

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHi() {
    console.log(`Hi, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}

let x: keyof Person = 'name';
let y: keyof Person = 'age';
let z: keyof Person = 'email'; //编译错误：类型 '"email"' 的值不能赋给类型 '"name" | "age"'。

在上面的例子中，我们定义了一个类Person，包含两个属性name和age，以及一个方法sayHi。方法sayHi会输出一个包含类属性的字符串。

然后我们定义了三个变量：x、y、z，它们的类型都是keyof Person，即T的键类型。

我们可以发现，变量x的值为"name"，变量y的值为"age"，而变量z的值为"email"，因为"email"并不是Person类型的键，所以它会被TypeScript认为是一个错误。

最后我们可以实例化一个Person对象，并在其上调用sayHi方法，从而输出一个形如"Hi, my name is Tom, and I am 25 years old."的字符串。