使用TypeScript调用react-timeout的setTimeout时失败

嘿，我之前也碰到过一模一样的问题！本质上是TypeScript找不到react-timeout的类型定义，所以不认这个被注入的setTimeout属性。给你几个靠谱的解决办法：

1. 先装社区维护的类型包 #

最直接的办法是安装@types/react-timeout，这是专门给react-timeout做的TypeScript类型声明：

npm install @types/react-timeout --save-dev
# 用yarn的话就是
yarn add @types/react-timeout --dev

装完之后重启一下你的TypeScript服务（比如VS Code可以重新加载窗口），应该就能识别到setTimeout属性了。

2. 手动补全类型（如果类型包不好使） #

万一装了类型包还是不行，那咱们手动给组件声明需要的props类型就行：

import React, { useState } from 'react';
import ReactTimeout from 'react-timeout';

// 先定义包含setTimeout的props类型
interface ComponentProps {
  setTimeout: (callback: () => void, delay: number) => number;
}

const LightSwitch: React.FC<ComponentProps> = ({ setTimeout }) => {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => {
    setIsOn(true);
    // 这里用注入的setTimeout，TypeScript就不会报错了
    setTimeout(() => setIsOn(false), 1000);
  };

  return (
    <button onClick={toggle}>
      {isOn ? '灯亮啦' : '灯灭着'}
    </button>
  );
};

// 别忘了用ReactTimeout包装组件
export default ReactTimeout(LightSwitch);

3. 确认高阶组件的使用姿势 #

再检查一下你是不是正确用ReactTimeout包装了组件——官方示例里是把组件作为参数传给ReactTimeout()，而不是直接在组件里解构未声明的props。要是你用的是函数组件，也可以看看react-timeout有没有提供hooks版本（比如useTimeout），不过官方的Light Switch示例用的是高阶组件，所以先把类型问题搞定就好。

另外提一句，react-timeout的核心作用是组件卸载时自动清掉超时任务，避免内存泄漏，所以别直接用原生setTimeout替代哦～

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