TypeScript 学习（八）：深入剖析 typeof Type 操作符和索引访问类型

2024-02-08 07:28:31

TypeScript 中 typeof 操作符与索引访问类型的协同作用

TypeScript 中的 typeof 操作符和索引访问类型是两大强力工具，联合使用时，它们可以发挥强大的作用。让我们深入探讨它们的用法及其在 TypeScript 类型系统中的意义。

typeof 类型操作符

typeof 类型操作符用于获取变量或属性的类型。例如：

let x: number = 10;
console.log(typeof x); // 输出：number

typeof x 返回 number 类型。它还可用于获取函数的返回类型：

function add(a: number, b: number): number {
  return a + b;
}

console.log(typeof add); // 输出：function
console.log(typeof add()); // 输出：number

索引访问类型

索引访问类型允许我们通过索引访问对象的属性。例如：

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

let person: Person = {
  name: "John Doe",
  age: 30
};

console.log(person["name"]); // 输出：John Doe
console.log(person["age"]); // 输出：30

typeof 操作符与索引访问类型的结合

typeof 操作符和索引访问类型可以联手，获取对象的属性类型的联合类型。例如：

interface Person {
  name: string;
  age: number;
  [key: string]: unknown;
}

let person: Person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

console.log(typeof person["name"]); // 输出：string
console.log(typeof person["age"]); // 输出：number
console.log(typeof person["city"]); // 输出：unknown

person 对象中的 city 属性的类型为 unknown，因此 typeof person["city"] 返回 unknown 类型。

应用场景

typeof 操作符和索引访问类型在 TypeScript 中的应用非常广泛，包括：

类型检查： 验证对象的属性是否具有正确的类型。
类型推断： 推断对象的属性类型。
泛型编程： 实现泛型编程。

实际示例

让我们考虑一个真实的示例：

const object = {
  name: "John Doe",
  age: 30,
  hobbies: ["programming", "reading"]
};

const nameType = typeof object["name"]; // string
const hobbiesType = typeof object["hobbies"]; // string[]