使用 react framer Type '() => void' 的打字稿错误无法分配给类型 'undefined'

Question

我正在使用 typescript、react 和 framer-motion。
我创建了一个 Counter 组件，其数量动态增加。但是，我遇到了一些 ts 错误。

Type '() => void' is not assignable to type 'undefined'.ts(2322) 错误发生在地方①.

错误Cannot invoke an object which possible 'undefined'.ts(2722)发生在②.

export const Index: React.FunctionComponent = () => {
  return (
   <Counter valueTo={30} totalDuration={2 + 0.5} />%
  );
};

import { useEffect, useRef, useState } from 'react';

interface Props {
  valueFrom: number;
  valueTo: number;
  totalDuration: number;
}

export const Counter: React.FunctionComponent<Props> = ({ valueFrom = 0, valueTo = 100, totalDuration = 1 }) => {
  const [count, setCount] = useState(valueFrom);

  useInterval(() => {
    if (count < valueTo) {
      setCount(count + 1);
    }
  }, (totalDuration / valueTo) * 1000);

  return count;
};

const useInterval = (callback: () => void, delay: number) => {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
     // ①
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      // ②
      savedCallback.current();
    }
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};

Answer 1

您需要将 ref 声明为具有该类型（useRef 使用泛型）并确保该函数不是未定义的（默认情况下 useRef 的“current”未定义）。您可以通过以下方式做到这一点：（查看您标记的位置）

const useInterval = (callback: () => void, delay: number) => {
  const savedCallback = useRef<()=>void>();

  // Remember the latest callback.
  useEffect(() => {
     // ①
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      // ②
      savedCallback.current && savedCallback.current();
    }
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};

使用 react framer Type '() => void' 的打字稿错误无法分配给类型 'undefined'

Error in typescript using react framer Type '() => void' is not assignable to type 'undefined'

reactjs

typescript

framer-motion