typescript - 如何在 TypeScript 中使用元数据键入表格数据？

Question

我们从后端获得了以下格式，其中 data 部分只是表格数据，meta 部分描述了表格中的列。元数据包含有关每列类型的信息。

示例

{
 meta: [
  {name: "foo", type: "NUMBER"},
  {name: "bar", type: "STRING"},
  {name: "baz", type: "TIMESTAMP"},
 ],
  data:[
    [1, "a", 12121232],
    [2, "b", 12121232],
    [3, "c", 12121232],
  ]
}

有什么办法可以在 TypeScript 中键入 meta 和 data 之间的关系吗？

目标是让此函数成功进行类型检查，因此我可以使用 meta 信息中的类型信息，而不是检查每个表格单元格的内容:

const fn = (data:Data) => {
  if(data.meta[1].type ==='STRING'){
    data.data[0][1].concat('-bar')
  }
}

Answer 1

我实际上最近输入了类似的东西。受此启发，我针对您的情况 (playground) 提出了以下建议:

type FieldType = 'NUMBER' | 'STRING' | 'TIMESTAMP';

// Suppress warning generated by unused type parameter `S`
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface TypedField<T extends FieldType, S> {
  name: string;
  type: T;
}

type NumberField = TypedField<'NUMBER', number>;
type StringField = TypedField<'STRING', string>;
type TimestampField = TypedField<'TIMESTAMP', number>;

type Field = NumberField | StringField | TimestampField;

type TypeofField<F> = F extends TypedField<infer T, infer S> ? TypedField<T, S> extends Field ? S : never : never;

interface Data {
  meta: Array<Field>;
  data: Array<{ [K in Extract<keyof this['meta'], number>]: TypeofField<this['meta'][K]>; }>;
}

const data: Data = {
  meta: [
    { name: "foo", type: "NUMBER" },
    { name: "bar", type: "STRING" },
    { name: "baz", type: "TIMESTAMP" },
  ],
  data: [
    [ 1, "a", 12121232 ],
    [ 2, "b", 12121232 ],
    [ 3, "c", 12121232 ],
  ],
};