如何在TypeScript中为带元数据的表格数据定义关联类型

我们可以通过TypeScript的泛型、元组映射能力实现meta和data的类型绑定，满足你的类型检查要求：

• 第一步：定义基础类型映射，把列类型字符串和对应的TS原生类型关联

// 可根据实际业务扩展其他列类型
type TypeMap = {
  NUMBER: number;
  STRING: string;
  TIMESTAMP: number;
}

• 第二步：定义列元数据和表格数据的泛型类型

// 单条列元数据类型
type ColumnMeta<T extends keyof TypeMap = keyof TypeMap> = {
  name: string;
  type: T;
}

// 完整表格数据类型，泛型T为列元数据的元组类型
type TableData<T extends ColumnMeta[]> = {
  meta: [...T];
  // data每行的元素类型和meta列的类型一一对应
  data: Array<{ [K in keyof T]: TypeMap[T[K]['type']] }>;
}

• 第三步：实际使用示例
  针对你给出的示例数据，可以直接推导对应表格类型，你的示例函数可正常通过类型校验：

// 定义你的meta结构，用as const保留元组的精确类型
const sampleMeta = [
  {name: "foo", type: "NUMBER"},
  {name: "bar", type: "STRING"},
  {name: "baz", type: "TIMESTAMP"},
] as const;

// 生成对应表格的类型
type SampleTable = TableData<typeof sampleMeta>;

// 你的示例函数，可正常通过类型检查
const fn = (data: SampleTable) => {
  if(data.meta[1].type === 'STRING'){
    // TS会自动识别data.data[0][1]为string类型，concat调用不会报错
    data.data[0][1].concat('-bar')
  }
}

补充说明 #

如果后端返回的表格结构是动态的、编译期无法确定的，你可以在拿到接口返回数据后通过as断言绑定对应类型，或者编写运行时校验函数结合类型谓词返回正确类型的表格数据，即可实现类型自动收窄，不需要额外校验每个单元格的内容。

内容的提问来源于stack exchange，提问作者Andreas Köberle