reactjs - 如何根据另一个对象动态键入数据集并将其绑定到可能出现的任意键？

Question

我试图找出一种基于某些参数动态键入响应对象的方法。

假设我有来自服务器的以下响应，

{
    columns: [
        {
            id: 'columnA',
            label: 'A label for A'
        },
        {
            id: 'columnB',
            label: 'A label for B'
        },
        {
            id: 'columnC',
            label: 'A label for C'
        },
    ],
    data: [
        {
            {
                id: '123',
                columnA: 'A value for columnA',
                columnB: 'A value for columnB',
                columnC: 'A value for columnC',
            },
            {
                id: '456',
                columnA: 'Another value for columnA',
                columnB: 'Another value for columnB',
                columnC: 'Another value for columnC',
            },
        }
    ]
}

我可以通过这样做来输入这个特定的例子，

const response: TResponse = await axios.get('/something')

type TData = {
    id: string;
    columnA: string;
    columnB: string;
    columnC: string;
}
type TColumn = {
    id: string;
    label: string;
}
type TResponse = {
    data: TData[];
    columns: TColumn[]
}

但如果columns发生变化呢？假设有不同的模型/实体，我可以知道columns属性。我是否应该为TColumn我能想到的每个案例写一个定义？如果有数百个具有不同列和字段的表怎么办？我该如何正确处理这个问题？

这里有一个用于 Material UI 的 React Table 组件的非凡示例（给它 2 到 3 秒的时间来完全加载并从链接带你到锚点）。

他们Data这样定义自己，

interface Data {
  calories: number;
  carbs: number;
  fat: number;
  name: string;
  protein: number;
}

TColumn在我的例子中，这将是类似的。

但是一旦到了这一部分，我就完全迷失了：

function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    return 1;
  }
  return 0;
}

type Order = 'asc' | 'desc';

function getComparator<Key extends keyof any>(
  order: Order,
  orderBy: Key,
): (
  a: { [key in Key]: number | string },
  b: { [key in Key]: number | string },
) => number {
  return order === 'desc'
    ? (a, b) => descendingComparator(a, b, orderBy)
    : (a, b) => -descendingComparator(a, b, orderBy);
}

function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0], b[0]);
    if (order !== 0) return order;
    return a[1] - b[1];
  });
  return stabilizedThis.map((el) => el[0]);
}

我对 Typescript 比较陌生，我觉得他们在这里的例子有点类似于我想要做的。如果我能理解这里发生了什么，我想我就能找到答案。

标签： reactjstypescript