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

// 初始的类型定义
export type OrderGrid = Array<string | [string, string]>;

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

// 期望的使用方式
const a: OrderedProperties = {
  props: ['title', 'firstName', 'lastName', 'nickName'],
  order: [
    'title',
    ['firstName', 'lastName'],
    'nickName'
  ]
};

/**
 * 定义OrderGrid类型，其中S是允许的字符串字面量联合类型。
 * 数组元素可以是单个S类型，也可以是包含两个S类型的元组。
 */
type OrderGrid<S extends string> = Array<S | [S, S]>;

/**
 * 定义OrderedProperties类型。
 * P是所有可能的属性名称的联合类型（通常从props数组推断）。
 * O是order数组中允许的属性名称的联合类型，默认情况下受P约束。
 */
type OrderedProperties<P extends string, O extends P = P> = {
  props: P[];
  order: OrderGrid<O>;
};

// 示例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",
  ],
};

/**
 * 处理OrderedProperties的函数，利用泛型推断props和order中的属性名称。
 */
declare function handleOrderedProps<P extends string, O extends P = P>(
  props: OrderedProperties<P, O>,
): 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)
    */
  ],
});

/**
 * 从OrderGrid中提取所有唯一的属性名称。
 */
function getPropsFromOrder<S extends string>(order: OrderGrid<S>): 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"]