React中如何给作为函数参数的useRef类型questionsRef定义TS类型

• 首先从React中导入内置的RefObject类型，它是专门用来描述useRef返回值的标准类型。
• 你在定义questionsRef时指定的ref存储内容类型为Array<HTMLDivElement | null>，直接作为泛型传入RefObject即可完成参数类型定义。

完整代码示例：

import type { RefObject } from 'react';

// questionsRef参数类型直接和useRef定义的泛型对应即可
const focusNextQuestion = (questionsRef: RefObject<Array<HTMLDivElement | null>>, nextQuestion: number) => {
  if (questionsRef.current) {
    // 示例逻辑：聚焦到下一个问题元素
    questionsRef.current[nextQuestion]?.focus();
  }
};

如果想要简化代码，也可以提前抽离类型别名复用：

import type { RefObject } from 'react';

// 抽离类型别名
type QuestionsRef = RefObject<Array<HTMLDivElement | null>>;

const focusNextQuestion = (questionsRef: QuestionsRef, nextQuestion: number) => {
  // 业务逻辑
};

如果你的工具函数内部需要修改questionsRef.current的数组内容，可以使用MutableRefObject类型替代RefObject，该类型同样可以从react包直接导入：

import type { MutableRefObject } from 'react';

const focusNextQuestion = (questionsRef: MutableRefObject<Array<HTMLDivElement | null>>, nextQuestion: number) => {
  // 支持修改current属性
  questionsRef.current.push(null);
};

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