TypeScript 中利用泛型实现对象属性的动态匹配与类型安全

• OrderGrid: S 是一个泛型参数，它被 extends string 约束，意味着 S 必须是字符串字面量类型（如 "title" | "firstName"）。OrderGrid 数组中的元素现在必须是 S 类型，或者是包含两个 S 类型元素的元组。
• OrderedProperties

  :

  • P extends string: P 代表所有合法的属性名，它是一个字符串字面量的联合类型。
  • O extends P = P: O 代表 order 数组中使用的属性名。它被约束为 P 的子类型，这意味着 order 中的属性名必须是 props 中声明过的。= P 提供了一个默认值，如果在使用 OrderedProperties 时不显式指定 O，则 O 会默认为 P，确保 order 严格匹配 props。

2.2 显式类型注解的使用

现在，当创建 OrderedProperties 类型的对象时，我们需要在类型注解中指定 P 的具体字符串字面量联合类型。

// 正确示例：所有 order 中的属性都在泛型 P 中声明
const a: OrderedProperties<"firstName" | "lastName" | "nickName" | "title"> = {
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}; // TypeScript 编译通过

// 错误示例：order 中包含未在泛型 P 中声明的属性
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，允许的属性只有 "firstName" | "lastName" | "nickName"。因此，当 props 数组中出现 "title"，或者 order 数组中出现 "title" 时，TypeScript 立即报告类型错误，因为 "title" 不属于我们为 P 指定的联合类型。

Multiavatar

Multiavatar是一个免费开源的多元文化头像生成器，可以生成高达120亿个虚拟头像

下载

三、泛型类型推断与函数应用

虽然显式地在类型注解中枚举所有属性是有效的，但在实际开发中可能会显得冗长和繁琐。更优雅的方式是让 TypeScript 编译器通过上下文自动推断泛型类型。这在将 OrderedProperties 对象作为函数参数传递时尤为有用。

我们可以定义一个处理 OrderedProperties 对象的函数，并让函数参数的泛型约束来引导类型推断：

/**
 * 处理 OrderedProperties 对象的函数。
 * P 和 O 的泛型约束使得 TypeScript 能够自动推断出 props 和 order 中允许的属性。
 */
declare function handleOrderedProps
(
  props: OrderedProperties,
): void;

// 示例：正确的使用方式，TypeScript 自动推断 P 和 O
handleOrderedProps({
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}); // 编译通过

// 示例：order 中缺少 props 中的属性是允许的
handleOrderedProps({
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
  ],
}); // 编译通过，因为 'nickName' 未在 order 中出现是合法的，但 order 中的元素必须在 props 中

// 示例：order 中包含未在 props 中声明的属性，TypeScript 报错
handleOrderedProps({
  props: ["title", "firstName", "lastName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName", /* 错误:
    ~~~~~~~~~~
    类型 '"nickName"' 不可分配给类型 '"firstName" | "lastName" | "title" | ["firstName" | "lastName" | "title", "firstName" | "lastName" | "title"]'。(2322)
    */
  ],
});

在这个 handleOrderedProps 函数的例子中，当我们将一个对象字面量直接传递给函数时，TypeScript 会根据 props 数组中的字符串内容推断出 P 的具体类型（例如 "title" | "firstName" | "lastName" | "nickName"）。然后，它会利用这个推断出的 P 类型来检查 order 数组中的元素是否符合 O extends P 的约束。这种方式极大地简化了类型声明，同时保持了强大的类型检查能力。

四、关于属性冗余的思考与优化

在某些设计中，props 数组可能看起来是冗余的，因为它所包含的信息（允许的属性名集合）可以从 order 数组中派生出来。如果 order 数组是唯一的属性名来源，我们可以编写一个辅助函数来从 order 中提取所有唯一的属性名。

/**
 * 从 OrderGrid 中提取所有唯一的属性名。
 * @param order 遵循 OrderGrid 类型的属性排列数组。
 * @returns 包含所有唯一属性名的数组。
 */
function getPropsFromOrder(order: OrderGrid): S[] {
  // 使用 flat() 扁平化数组，然后通过 Set 过滤出唯一的属性名
  return Array.from(new Set(order.flat())) as S[];
}

// 示例用法
const myOrder: OrderGrid<"propA" | "propB"> = [
  "propA",
  ["propA", "propB"]
];
const derivedProps = getPropsFromOrder(myOrder);
console.log(derivedProps); // 输出: ["propA", "propB"]

这个 getPropsFromOrder 函数展示了如何从 order 数组中动态提取 props 数组的内容。在实际应用中，这取决于 props 数组是否可能包含一些不用于 order 排列但仍需声明的属性。如果 props 仅仅是 order 中所有属性的集合，那么可以考虑简化数据结构，只保留 order 字段，并通过工具函数在需要时生成 props 列表。