TypeScript报ts(1170)/ts(7053) 动态生成react-data-table-component列如何解决

错误原因 #

• 错误1：TypeScript要求类型字面量的计算属性名必须是字面量类型或unique symbol类型，你遍历用的element是普通string类型，不满足要求，因此触发ts(1170)报错。
• 错误2：你没有给row声明支持字符串索引的类型，TypeScript不知道可以用字符串去索引row的属性，因此触发ts(7053)报错。此外原代码存在逻辑问题：selector里取值时用了原大小写的element，和你转小写的key不匹配，实际运行也会取不到值。

修复方案 #

快速适配方案 #

直接声明row为支持任意字符串索引的类型，绕开动态计算属性的类型限制，同时修正取值逻辑：

const data = ["Title", "Year"];
const columns = data.map((element) => {
  // 提前计算好转小写的key，保证取值和列定义对应
  const fieldKey = element.toLowerCase();
  return {
    // 和静态示例保持一致，列名显示原大写格式，不需要转小写可以删掉toLowerCase
    name: element,
    selector: (row: Record<string, any>) => row[fieldKey],
  };
});

Record<string, any>表示该对象可以用任意字符串作为key取值，直接解决两个类型报错。

类型安全优化方案 #

如果你的行数据有固定的字段范围，可以用类型约束避免any，获得更完整的类型校验：

// 定义表格行数据的固定字段类型
type TableRow = {
  title: string;
  year: number;
  // 可扩展其他字段
};

// 将数据源转成字面量类型，获得更严格的类型校验
const data = ["Title", "Year"] as const;

const columns = data.map((element) => {
  const fieldKey = element.toLowerCase() as keyof TableRow;
  return {
    name: element,
    selector: (row: TableRow) => row[fieldKey],
  };
});

内容的提问来源于stack exchange，提问作者Sylvain