TypeScript中如何动态匹配对象属性：使用泛型实现强类型约束

• OrderGrid：现在OrderGrid接受一个泛型参数S，它必须是string的子类型（通常是字符串字面量的联合类型）。这意味着OrderGrid中的每个字符串元素都必须是S类型。
• OrderedProperties

  ：

  • P extends string：P代表了props数组中所有可能的属性名称的联合类型。
  • O extends P = P：O代表了order数组中允许的属性名称的联合类型。O被约束为P的子类型，并且默认值为P。这个默认值非常重要，它确保了如果O没有被显式指定，它将自动继承P的约束。

2.2 显式类型注解的使用

现在，我们可以使用这些泛型类型来定义我们的对象，并通过显式类型注解来强制执行匹配。

// 示例1：正确的使用方式
// 明确指定允许的属性名称联合类型
const example1: OrderedProperties<"firstName" | "lastName" | "nickName" | "title"> = {
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}; // 编译通过，所有名称都匹配

// 示例2：错误的使用方式 - props中包含不允许的名称
const example2: 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",
  ],
};

在example2中，我们显式地告诉TypeScript，只有"firstName" | "lastName" | "nickName"是允许的属性。由于props和order中都包含了"title"，而"title"不在允许的联合类型中，TypeScript会立即报告类型错误。

2.3 利用类型推断简化使用

虽然显式类型注解能够强制类型安全，但在实际开发中，每次都手动列出所有属性名称可能会非常繁琐。幸运的是，当这些对象作为函数参数传递时，TypeScript的类型推断机制可以极大地简化这一过程。

RoomGPT

使用AI为每个人创造梦想的房间

下载

我们可以定义一个函数，它接受OrderedProperties类型的参数，并让TypeScript自动推断泛型参数P和O。

/**
 * 处理OrderedProperties的函数，利用泛型推断props和order中的属性名称。
 */
declare function handleOrderedProps
(
  props: OrderedProperties,
): void;

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

// 示例4：函数调用 - order中包含props中不存在的名称
handleOrderedProps({
  props: ["title", "firstName", "lastName"], // 注意这里缺少"nickName"
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName", /* 错误：
    ~~~~~~~~~~
    类型 '"nickName"' 不可分配给类型 '"firstName" | "lastName" | "title" | ["firstName" | "lastName" | "title", "firstName" | "lastName" | "title"]'。(2322)
    */
  ],
});

在示例3中，当调用handleOrderedProps时，TypeScript会从传入的props数组["title", "firstName", "lastName", "nickName"]中推断出P为"title" | "firstName" | "lastName" | "nickName"。由于O默认受P约束，order数组中的所有元素都必须是这个联合类型的一部分。

在示例4中，props数组中缺少"nickName"，因此P被推断为"title" | "firstName" | "lastName"。当order数组中出现"nickName"时，TypeScript会立即报错，因为"nickName"不属于推断出的P类型。

这种方式使得类型检查既强大又灵活，开发人员无需手动编写冗长的类型注解，同时仍然享受到编译时类型安全的好处。

3. 注意事项与实用技巧

3.1 属性冗余与数据源的选择

在某些设计中，props数组和order数组之间可能存在一定程度的冗余。例如，如果order数组总是包含所有需要使用的属性名，那么props数组可能就不是严格必需的，或者可以从order中派生出来。

如果order被认为是主要的数据源，我们可以轻松地从order中提取所有唯一的属性名称：

/**
 * 从OrderGrid中提取所有唯一的属性名称。
 */
function getPropsFromOrder(order: OrderGrid): S[] {
  // 使用flat()将嵌套数组扁平化，然后去重
  return Array.from(new Set(order.flat())) as S[];
}

const myOrder: OrderGrid<"a" | "b" | "c"> = [
  "a",
  ["b", "c"],
  "a"
];

const derivedProps = getPropsFromOrder(myOrder);
console.log(derivedProps); // 输出: ["a", "b", "c"]

这种方法可以帮助我们避免数据冗余，并确保props始终与order中实际使用的属性保持一致。在设计类型时，需要根据实际业务逻辑决定哪个字段是主导的，或者两者是否都需要显式定义。