前端 - 元素隐式具有 "any" 类型，因为类型为 "number" 的表达式不能用于索引类型 "MutableRefObject<[]>"?

Question

创建了ref数组，为何使用的时候

//创建用于装ref的数组：
const ctlChildRefs = useRef<SubContainerImperativeRef[]>([]); // 多个子组件用数组装

...

//但是使用时候报错
ctlChildRefs[index]  

报错信息：

元素隐式具有 "any" 类型，因为类型为 "number" 的表达式不能用于索引类型 "MutableRefObject<SubContainerImperativeRef[]>"。
  在类型 "MutableRefObject<SubContainerImperativeRef[]>" 上找不到具有类型为 "number" 的参数的索引签名。ts(7053)

Answer 1

需要如下方式使用：

if(ctlChildRefs  && ctlChildRefs.current) {
    ctlChildRefs.current[index].doSomething()
}

Answer 2

在你的情况中，错误的原因是因为你错误地理解了useRef的使用方式。当你使用useRef<SubContainerImperativeRef[]>([])时，你实际上是在创建一个MutableRefObject<SubContainerImperativeRef[]>，这意味着ctlChildRefs.current是一个SubContainerImperativeRef[]数组，而不是ctlChildRefs本身。

因此，当你尝试通过索引访问ctlChildRefs[index]时，TypeScript 编译器会报错，因为它认为ctlChildRefs是一个MutableRefObject<SubContainerImperativeRef[]>，而不是一个数组，而MutableRefObject类型没有定义接受数字索引的索引签名。

正确的访问方式应该是通过ctlChildRefs.current[index]来访问数组中的元素。ctlChildRefs.current是实际的数组，你可以使用索引来访问其元素。

修改后的代码应该如下：

// 创建用于装ref的数组：
const ctlChildRefs = useRef<SubContainerImperativeRef[]>([]); // 多个子组件用数组装

// 使用时
const someElement = ctlChildRefs.current[index]; // 正确访问方式

这样，你就可以正确地访问到ctlChildRefs数组中的元素了。如果index在数组的有效范围内，这段代码就不会有问题。如果index可能超出数组范围，你可能还需要添加一些检查来避免运行时错误。