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

/**
 * 定义一个网格顺序类型 OrderGrid。
 * 它接受一个泛型参数 S，该参数必须是字符串字面量联合类型。
 * OrderGrid 可以是包含 S 类型元素的数组，或包含 S 类型元组的数组。
 */
type OrderGrid<S extends string> = Array<S | [S, S]>;

/**
 * 定义一个有序属性对象类型 OrderedProperties。
 * P: 代表所有有效的属性名称字符串字面量联合类型。
 * O: 代表 order 数组中允许使用的属性名称子集，默认与 P 相同。
 *    O 必须是 P 的子类型 (O extends P)，确保 order 中的属性名是 props 定义的有效属性。
 */
type OrderedProperties<P extends string, O extends P = P> = {
  props: P[]; // props 数组的元素必须是 P 类型，即所有有效属性的集合
  order: OrderGrid<O>; // order 数组的元素必须是 O 类型，即 P 的子集
};

// 示例 1: 有效的属性定义和顺序
// P 被明确指定为 "firstName" | "lastName" | "nickName" | "title"
const a: OrderedProperties<"firstName" | "lastName" | "nickName" | "title"> = {
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}; // 类型检查通过，一切正常

// 示例 2: 包含无效属性的定义，导致类型错误
// P 被明确指定为 "firstName" | "lastName" | "nickName"，不包含 "title"
const a2: OrderedProperties<"firstName" | "lastName" | "nickName"> = {
  props: ["title", "firstName", "lastName", "nickName"], /* 错误:
          ~~~~~~~
  类型 '"title"' 不能分配给类型 '"firstName" | "lastName" | "nickName"'。(2322)
  因为 'props' 数组中包含了 'title'，而它不在泛型参数 P 定义的允许范围内。*/
  order: [
    "title", /* 错误:
    ~~~~~~~
    类型 '"title"' 不能分配给类型 '"firstName" | "lastName" | "nickName" | ["firstName" | "lastName" | "nickName", "firstName" | "lastName" | "nickName"]'。(2322)
    因为 'order' 数组中包含了 'title'，它也不在泛型参数 O (默认为 P) 定义的允许范围内。*/
    ["firstName", "lastName"],
    "nickName",
  ],
};

/**
 * 声明一个用于处理 OrderedProperties 对象的函数。
 * TypeScript 会根据传入的参数自动推断 P 和 O 的具体类型。
 */
declare function handleOrderedProps<P extends string, O extends P = P>(
  props: OrderedProperties<P, O>,
): void;

// 示例 1: 有效的属性定义和顺序，类型推断成功
// TypeScript 会自动从 props 数组推断出 P 为 "title" | "firstName" | "lastName" | "nickName"
handleOrderedProps({
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName",
  ],
}); // 正常，类型检查通过

// 示例 2: order 数组中缺少 props 定义的属性 (这种情况是允许的)
// P 仍被推断为所有 props 中的字符串，order 中只使用了部分，符合 O extends P 的约束
handleOrderedProps({
  props: ["title", "firstName", "lastName", "nickName"],
  order: [
    "title",
    ["firstName", "lastName"],
  ],
}); // 正常，"nickName" 未被使用是允许的，因为它仍在 P 的范围内

// 示例 3: order 数组中包含 props 未定义的属性，导致类型错误
// P 被推断为 "title" | "firstName" | "lastName"
handleOrderedProps({
  props: ["title", "firstName", "lastName"],
  order: [
    "title",
    ["firstName", "lastName"],
    "nickName", /* 错误:
    ~~~~~~~~~~
    类型 '"nickName"' 不能分配给类型 '"firstName" | "lastName" | "title" | ["firstName" | "lastName" | "title", "firstName" | "lastName" | "title"]'。(2322)
    因为 'nickName' 不在从 'props' 数组推断出的 P (即 "title" | "firstName" | "lastName") 范围内。*/
  ],
});

/**
 * 从 OrderGrid 中提取所有属性名称并扁平化为字符串数组。
 * 这可以作为一种工具函数，用于从 order 派生出 props 列表。
 */
function getPropsFromOrder<S extends string>(order: OrderGrid<S>): S[] {
  // 使用 flat() 方法将嵌套数组扁平化，并进行类型断言以保持类型 S[]
  return order.flat() as S[];
}

// 示例使用
const myOrder: OrderGrid<"productName" | "price" | "quantity"> = [
    "productName",
    ["price", "quantity"]
];
const derivedProps = getPropsFromOrder(myOrder); // derivedProps 的类型是 ("productName" | "price" | "quantity")[]
console.log(derivedProps); // 输出: ["productName", "price", "quantity"]