TypeScript 中利用泛型实现对象属性的动态匹配与约束

2. 定义泛型 OrderedProperties

接下来，我们为 OrderedProperties 类型引入两个泛型参数：

• P extends string：代表 props 数组中所有允许的属性名称的联合类型。
• O extends P = P：代表 order 数组中允许使用的属性名称的联合类型。默认情况下，O 等同于 P，但我们也可以选择性地进一步约束 order 中的属性集合。

type OrderedProperties
 = {
  props: P[];
  order: OrderGrid;
};

通过这种定义，props 数组被声明为 P[]，意味着它只能包含 P 类型中的字符串字面量。而 order 数组则使用 OrderGrid，其中 O 被约束为 P 的子集，确保 order 中的属性名也必须是 P 中定义的。

STORYD

帮你写出让领导满意的精美文稿

下载

3. 实际应用：通过类型注解进行约束

现在，我们可以使用这些泛型类型来强制执行匹配。在声明变量时，我们需要显式地提供泛型参数，即 props 中所有可能字符串字面量的联合类型。

// 示例 1: 有效的属性匹配
const a: OrderedProperties<"firstName" | "lastName" | "nickName" | "title"> = {
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}; // 编译通过

// 示例 2: 无效的属性匹配，将产生编译错误
const a2: OrderedProperties<"firstName" | "lastName" | "nickName"> = {
  props: ["title", "firstName", "lastName", "nickName"], /* 错误:
          ~~~~~~~
  类型 '"title"' 不可分配给类型 '"firstName" | "lastName" | "nickName"'。(2322)
  */
  order: [
    "title", /* 错误:
    ~~~~~~~
    类型 '"title"' 不可分配给类型 '"firstName" | "lastName" | "nickName" | ["firstName" | "lastName" | "nickName", "firstName" | "lastName" | "nickName"]'。(2322)
    */
    ["firstName", "lastName"],
    "nickName",
  ],
};

在 a2 的例子中，我们明确告诉 TypeScript OrderedProperties 只能处理 "firstName" | "lastName" | "nickName" 这些属性。当 props 或 order 中出现了 "title" 时，TypeScript 立即报告了类型不匹配错误。这正是我们希望实现的动态约束效果。

4. 简化使用：利用函数进行类型推断

虽然显式地在类型注解中列举所有字符串字面量可以实现约束，但这在属性列表较长时会变得繁琐。更优雅的方式是利用 TypeScript 的类型推断机制，尤其是在将 OrderedProperties 对象作为函数参数传递时。

我们可以定义一个函数，其参数类型使用泛型 OrderedProperties。当调用此函数并传入一个对象字面量时，TypeScript 编译器能够根据传入对象的 props 数组内容自动推断出 P 和 O 的具体类型。

declare function handleOrderedProps
(
  props: OrderedProperties,
): void;

// 示例 3: 编译器自动推断，有效输入
handleOrderedProps({
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}); // 编译通过

// 示例 4: order 中使用的属性是 props 的子集，有效输入
handleOrderedProps({
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
  ],
}); // "nickName" 未被使用，但仍编译通过（有效）

// 示例 5: order 中包含 props 未定义的属性，产生编译错误
handleOrderedProps({
  props: ["title", "firstName", "lastName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName", /* 错误:
    ~~~~~~~~~~
    类型 '"nickName"' 不可分配给类型 '"firstName" | "lastName" | "title" | ["firstName" | "lastName" | "title", "firstName" | "lastName" | "title"]'。(2322)
    */
  ],
});

通过 handleOrderedProps 函数，我们无需手动指定泛型参数，编译器会根据 props 数组的内容自动推断出 P 的类型，然后根据 P 来约束 order 中的元素。这大大提升了开发体验，同时保持了严格的类型检查。

进一步思考：属性冗余与优化

在某些场景下，props 数组可能与 order 数组中的信息存在冗余。如果 order 数组已经包含了所有需要展示的属性信息，那么 props 数组可能就没有必要单独维护。我们可以从 order 数组中动态地提取出所有涉及的属性名。

例如，可以使用 Array.prototype.flat() 方法来展平 order 数组，从而获取所有属性的列表：

function getPropsFromOrder(order: OrderGrid): S[] {
  // 使用 flat() 展平数组，并将结果断言为 S[]
  // 注意：此处需要类型断言，因为 flat() 的返回类型可能更宽泛
  return order.flat() as S[];
}

// 示例：
const myOrder: OrderGrid<"a" | "b" | "c"> = [
    "a",
    ["b", "c"]
];
const derivedProps = getPropsFromOrder(myOrder); // derivedProps 的类型为 ("a" | "b" | "c")[]
console.log(derivedProps); // 输出: ["a", "b", "c"]

这种方法可以帮助我们避免数据冗余，并确保 props 总是与 order 中的实际使用保持一致。在设计数据结构时，可以考虑是否总是需要显式地提供 props 数组，或者是否可以通过这种方式从 order 中派生。