在 Typescript React 中使用 setInterval()

Posted 2023-02-25

【中文标题】在 Typescript React 中使用 setInterval()

【英文标题】：Using setInterval() in Typescript React

【发布时间】：2019-01-31 23:57:10

【问题描述】：

我正在尝试将基于 React 的计时器 example 转换为 Typescript。

这个类看起来有点像这样：

export class Container extends
    Component<IProps, IState> 

    private timerID: NodeJS.Timeout | undefined;  // stops a warning in DidMount

    constructor(props: IRevovlingContainerProps) 
        super(props);
        this.state =  date: new Date()  as any;
    

    componentDidMount() 
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    

    componentWillUnmount() 
        clearInterval(this.timerID);  // error here on this.timerID
    

    // ...

在componentWillUnmount()this.timerID有错误：

[ts] 'Timeout | 类型的参数undefined' 不可分配给 'number | 类型的参数不明确的'。类型“超时”不是 可分配给类型“数字”。 [2345]

我检查了index.d.ts，它声明了clearInterval()：

declare function clearInterval(intervalId: NodeJS.Timeout): void;

所以看起来我正在将一个正确输入的参数传递给 clearInterval() ，但它需要一个数字。请问我应该传入什么？

编辑：如果我更改我的 timerID 声明，则this.timerID 中的componentDidMount() 中会出现错误：

private timerID: number | undefined; 
Type 'Timeout' is not assignable to type 'number'.

【参考方案1】：

NodeJS.Timeout 用于在node 环境中运行时使用。由于您想使用浏览器 API，因此您必须使用 number 作为 timerID 的类型。

此外，在您的情况下，内置函数不应从 node 类型定义解析它们的类型。如果您安装了@types/node，如果不需要，请卸载它。这可能与您需要使用的类型冲突。

【讨论】：

明白了，谢谢！人们曾经使用过两种类型的打字吗？如果有，他们是怎么做到的？

我认为您可能需要不同的tsconfigs。不过我不确定。

【参考方案2】：

React 使用 javascript 的普通 setInterval，它返回一个数字。 检查setInterval on MDN

The returned intervalID is a numeric, non-zero value

但是，您所指的返回类型 NodeJS.Timeout 是 Node's setInterval 返回的类型。这是特定于 Node.js 的。

Class: Timeout:

"This object is created internally and is returned from setTimeout() and setInterval()"

Timeout不能赋值给数字表示你将期望的类型声明为Node的Timeout，而实际收到的是一个数字。

【参考方案3】：

如果您将其定义为 any，它应该可以工作。

private timerID: any;

【讨论】：

欢迎来到 SO。这个问题已经很老了，并且已经有一个公认的答案。考虑添加一些关于为什么这样做的细节，或者说明为什么你的答案是一个好的（更好的？）替代方案。