TypeScript中使用字符串索引PlanificationElement时出现类型报错求助

这个错误是因为TypeScript无法确认col对应的是PlanificationElement的合法属性名，所以默认给索引操作标上了any类型警告。下面给你几个靠谱的解决办法：

方法1：约束col为目标类型的合法属性键 #

把BaseCellRenderProps里的col类型从string改成keyof PlanificationElement，让TypeScript明确知道col一定是PlanificationElement的有效属性：

import { PlanificationElement } from "../../../models/dtos/PlanificationElement";
interface BaseCellRenderProps {
  cell: { data: PlanificationElement };
  // 将string替换为keyof PlanificationElement
  col: keyof PlanificationElement;
}
export const BaseCellRender: React.FC<BaseCellRenderProps> = ({ cell, col }) => {
  if (cell.data.level !== 4) {
    return <b>{cell.data[col]}</b>;
  }
  return cell.data[col];
};

方法2：给PlanificationElement添加字符串索引签名 #

如果你的PlanificationElement确实需要支持任意字符串作为键，可以给它加上索引签名，直接允许用任意string索引：

// 修改PlanificationElement的定义
interface PlanificationElement {
  // 保留原有属性
  level: number;
  // 其他已定义属性...
  // 添加字符串索引签名
  [key: string]: any;
}

注意：这种方法会弱化类型检查，除非你确实需要支持任意属性，否则不推荐使用。

方法3：使用类型断言（临时应急方案） #

如果没法修改col的类型或者PlanificationElement的定义，可以用类型断言告诉TypeScript这个操作是安全的：

export const BaseCellRender: React.FC<BaseCellRenderProps> = ({ cell, col }) => {
  // 断言col为PlanificationElement的合法键
  const value = cell.data[col as keyof PlanificationElement];
  if (cell.data.level !== 4) {
    return <b>{value}</b>;
  }
  return value;
};

这种方法要谨慎使用，因为如果col不是合法属性，运行时可能出现异常。

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