Question

我正在尝试将基于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 |未定义”不能分配给 'number |类型的参数未定义”。类型“超时”不是可分配给“数字”类型。 [2345]

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

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

因此，看起来我正在将正确键入的参数传递给clearInterval（），但它需要一个数字。我应该传递什么？

编辑：如果我更改了timerID声明，则在this.timerID的{{1}}中出现错误：

componentDidMount()

Answer 1

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()"

无法将超时分配给数字，这意味着您正在将期望的类型声明为Node的超时，而实际收到的是数字。

Answer 2

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

此外，对于您而言，内置函数不应从node类型定义中解析其类型。如果您安装了@types/node，请不要将其卸载。这可能与您需要使用的类型冲突。

Answer 3

如果您将其定义为任何内容，则应该可以使用。

private timerID: any;

在Typescript React中使用setInterval（）

3 个答案: