深度解析TS类型体操：玩转DeepKeyOf，点亮对象遍历新技能

2023-10-03 13:13:34

背景

在TypeScript中，keyof可以获取一个接口的所有键名。然而，它并没有提供递归获取接口键名的能力，这种能力非常有用，例如在编写通用函数时，我们需要知道对象的所有键名，以便对对象进行遍历和操作。

认识DeepKeyOf

DeepKeyOf是一个高级TypeScript类型，它允许我们递归地获取一个接口的所有键名。换句话说，它可以获取接口中所有子接口和属性的键名。

DeepKeyOf的语法如下：

type DeepKeyOf<T> = T extends object ? (T[keyof T] extends object ? keyof T & keyof DeepKeyOf<T[keyof T]> : keyof T) : never;

其中，T是我们要获取键名的类型。

实例详解

为了更好地理解DeepKeyOf的用法，我们来看几个实例：

interface User {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
    state: string;
  };
}

type DeepKeysOfUser = DeepKeyOf<User>;

// DeepKeysOfUser = "name" | "age" | "address" | "address.street" | "address.city" | "address.state"

从这个例子中，我们可以看到，DeepKeyOf可以获取User接口及其所有子接口的键名。

再看一个例子：

interface Product {
  id: number;
  name: string;
  price: number;
  categories: string[];
  tags: string[];
  relatedProducts: {
    [key: string]: Product;
  };
}

type DeepKeysOfProduct = DeepKeyOf<Product>;

// DeepKeysOfProduct = "id" | "name" | "price" | "categories" | "tags" | "relatedProducts" | "relatedProducts.[key]"