React TypeScript索引非number隐式为any报错如何解决

1. 替换votes状态的any类型 #

你的votes对象是数字作为键、票数（数字）作为值的结构，直接用TS内置的Record类型定义即可，替换后的代码：

const [votes, setVotes] = useState<Record<number, number>>({
  0: 0,
  1: 0,
  2: 0,
  3: 0,
  4: 0,
  5: 0,
});

如果不想用Record，也可以用索引签名写法{ [key: number]: number }，二者效果完全一致。

2. 解决索引类型报错 #

报错的核心原因是：Object.keys()返回的数组元素类型固定为string，直接拿字符串类型的值去给数组anecdotes当索引（要求是number类型），就会触发类型不匹配的报错。
只需要把拿到的键统一转成数字类型即可，修改mostVoted的计算逻辑：

// 先把所有key转成数字，再排序
const mostVoted = Object.keys(votes)
  .map(Number)
  .sort((a, b) => votes[b] - votes[a])[0];

修改完成后，排序时取votes的值、后续用mostVoted当索引取anecdotes内容的逻辑类型都会完全匹配，报错就会消失。

额外说明：JS中所有对象的键最终都会被隐式转换为字符串，所以TS官方将Object.keys()的返回值类型固定为string[]，就是为了避免开发者误把字符串当数字索引使用引发隐式问题。

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