Блог

Главная - Вопросы по программированию - Как назначить функцию ref, используя useRef с помощью typescript?

Как назначить функцию ref, используя useRef с помощью typescript?

#reactjs #typescript #react-hooks

#reactjs #typescript #реагирующие хуки

Вопрос:

Я новичок в typescript. Я хочу назначить функцию для ссылки в пользовательском перехватчике. Чтобы функция не менялась при рендеринге.

Ссылка на Codesandbox. https://codesandbox.io/s/918l0wro4r

 function something(params?: any) {
  console.error('params: ', params);
}
const someRef = React.useRef(null); //how do i assign type here.
async function someAsyncFunc() {
  try {
    const a = await something();
    something(a);
  } catch (error) {
    something(error);
  }
}

someRef.current = someAsyncFunc; // ts error here. need help here

Ответ №1:

useRef является универсальным типом. Вам нужно добавить параметр type, чтобы указать TypeScript, какие значения вы хотите использовать. В вашем случае код инициализации ref будет выглядеть следующим образом:

 const someRef = React.useRef<Function>()

Function тип позволяет использовать любую функцию в качестве ссылки. Возможно, вам захочется немного сузить его, если вы имеете в виду конкретную форму. Например, в вашем случае это было бы так:

 const someRef = React.useRef<() => Promise<void>>();
async function someAsyncFunc() {
  // ...
}
someRef.current = someAsyncFunc;