React中使用JSX.Element定义TS Interface出现类型错误如何解决

问题原因 #

你定义的RowsData是单个行对象的类型，但rows实际是由多个RowsData对象组成的数组，给rows标注的类型和实际值类型不匹配，因此触发了报错。

修复方案 #

把rows的类型从RowsData调整为数组类型RowsData[]即可，修改后完整代码如下：

interface RowsData {
  [key: string]: string | number | JSX.Element;
}

const rows: RowsData[] = [
  { id: 1, name: 'A', action: <div style={{ color: 'blue' }}> Hello </div> },
  { id: 2, name: 'B', action: <div style={{ color: 'blue' }}> World </div> },
  { id: 3, name: 'C', action: <div style={{ color: 'blue' }}> Foo </div> }
];

可选优化（更严谨的类型定义） #

如果你的行对象字段固定只有id、name、action三个，不需要支持动态字符串key，建议直接明确声明字段类型，避免索引签名带来的不必要的类型宽松：

interface RowsData {
  id: number;
  name: string;
  action: JSX.Element;
}

const rows: RowsData[] = [
  { id: 1, name: 'A', action: <div style={{ color: 'blue' }}> Hello </div> },
  { id: 2, name: 'B', action: <div style={{ color: 'blue' }}> World </div> },
  { id: 3, name: 'C', action: <div style={{ color: 'blue' }}> Foo </div> }
];

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