TypeScript React Framer项目自定义useInterval钩子类型报错如何解决？

错误根因 #

两个报错均来自自定义useInterval钩子的类型定义不完整：

• 报错①：useRef初始化未指定类型，TypeScript默认推导其current属性类型为undefined，无法接收传入的回调函数
• 报错②：savedCallback.current被判定为可能为undefined，不允许直接调用
  另外你定义的Counter组件Props接口所有属性为必填，调用时仅传2个参数也会触发类型错误，需要同步调整。

修复代码 #

调整后完整的Counter组件代码 #

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);

  // 补充：React组件不能直接返回数字，需要包裹在标签里，否则会触发运行时错误
  return <>{count}</>;
};

const useInterval = (callback: () => void, delay: number) => {
  // 给ref指定回调函数类型，解决报错①
  const savedCallback = useRef<() => void>();

  // 存储最新回调
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // 启动定时器
  useEffect(() => {
    function tick() {
      // 用可选链调用，避免undefined报错，解决报错②
      savedCallback.current?.();
    }
    if (delay !== null && delay !== undefined) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};

调用代码无需调整 #

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

补充说明 #

• 可选链?.会在current为undefined时自动终止执行，符合定时器的运行逻辑，无需额外的非空断言
• delay判断新增了undefined校验，避免delay为异常值时启动无效定时器

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