TypeScript 中如何强制对象属性间的动态匹配

2. 定义泛型 OrderedProperties

接下来，我们对 OrderedProperties 类型进行泛型化。它将接受两个类型参数：

• P extends string: 代表 props 数组中允许的所有字符串字面量类型。
• O extends P = P: 代表 order 数组中允许的所有字符串字面量类型。默认情况下，O 被约束为 P，这意味着 order 中的属性必须是 props 中定义的属性的子集（或完全相同）。

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

通过这种方式，我们建立了 props 和 order 之间的动态类型关联。

3. 显式类型注解的使用

现在，当创建 OrderedProperties 类型的对象时，我们可以显式地指定 P 类型参数，从而让 TypeScript 强制执行类型检查。

// 正确示例：所有order中的属性都在props中定义
const a: OrderedProperties<"firstName" | "lastName" | "nickName" | "title"> = {
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}; // 类型检查通过

// 错误示例：props中缺少"title"，或者order中使用了props未定义的属性
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 的例子中，由于我们显式地将 P 类型参数限制为 "firstName" | "lastName" | "nickName"，当 props 数组中包含 "title" 或 order 数组中包含 "title" 时，TypeScript 就会立即报告类型错误。

有道智云AI开放平台

有道智云AI开放平台

下载

优化体验：函数参数中的类型推断

显式地枚举所有允许的字符串字面量可能会很繁琐。如果 OrderedProperties 对象通常作为函数参数使用，我们可以利用 TypeScript 的类型推断能力来简化这一过程。

通过将 OrderedProperties 对象作为泛型函数的参数，编译器可以自动从传入的 props 数组中推断出 P 的具体类型，并进一步约束 order 数组。

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

// 正确示例：编译器自动推断 P 为 "title" | "firstName" | "lastName" | "nickName"
handleOrderedProps({
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}); // ok

// 正确示例：order中可以不包含所有props中的属性
handleOrderedProps({
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
  ],
}); // "nickName" 未被使用，但类型上是允许的 (ok)

// 错误示例：order中包含props未定义的属性
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 的精确字面量类型，然后将这个类型用于约束 order 数组中的元素。这样，开发者无需手动指定泛型参数，即可享受到严格的类型检查。

属性冗余与数据派生

在某些设计中，props 数组和 order 数组之间可能存在冗余。如果 props 数组仅仅是 order 数组中所有唯一属性名的扁平化集合，那么 props 属性本身可能就是冗余的，或者可以从 order 动态派生出来。

我们可以编写一个辅助函数来从 order 数组中提取并扁平化所有属性名：

/**
 * 从 OrderGrid 中提取所有唯一的属性名称。
 * @param order - 描述属性排列方式的 OrderGrid 数组。
 * @returns 包含所有属性名称的字符串数组。
 */
function getPropsFromOrder(order: OrderGrid): S[] {
  // 使用 flat() 方法将嵌套数组扁平化，并进行类型断言以保持 S 类型
  return order.flat() as S[];
}

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

这个 getPropsFromOrder 函数展示了如何从 order 属性中派生出 props 属性，从而减少数据冗余并确保一致性。在实际应用中，你可以根据业务逻辑决定 props 是否应该显式声明，或者由 order 派生。