Create-react-app: @types/node interfering with JS Timers

[HairyMaclary]

Is this a bug report?

yes

Did you try recovering your dependencies?

Yes, steps followed.
npm version: 6.7.0

Which terms did you search for in User Guide?

@types/node
NodeJS.Timeout
Timers
[ts] Type 'Timeout' is not assignable to type 'number'. [2322]

Environment

Environment Info:
(node:14436) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: The system cannot find the path specified.

(node:14436) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to Reproduce

I'm trying to convert a react timer example into typescript.

The example looks a little like this:

import React, { Component } from 'react';

export interface IContainerProps {
}

interface IContainerState {
    date: Date;
}

export class Container extends
    Component<IContainerProps, IContainerState> {

    private timerID: number | undefined;  // as required by clearInterval();

    state = { date: new Date() };

    componentDidMount() {
        this.timerID = setInterval(  // Error: see below
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }
    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        )
    }
}

Error on this.timerID:

[ts] Type 'Timeout' is not assignable to type 'number'. [2322]

Expected Behavior

In a browser environment setInterval() should return back the same type that clearInterval() takes in; number.

Actual Behavior

Because of @types/node (which is needed for functionality such as 'process') setInterval() returns the type NodeJS.Timeout instead of number.

There is a similar problem here but the work around (specifying types in the compiler options in tsconfig.json) does not seem work here.

Reproducible Demo

Just create a file within the app and paste in the above example.

[mrmckeb]

Hi @HairyMaclary, I can see how this would be annoying... you could use as to force this into a browser timer, but that isn't a perfect solution.

You could consider creating a tsconfig.json in either the folder where your Node files live that adds the library there? Example:
https://stackoverflow.com/questions/45315304/cannot-find-namespace-nodejs-when-using-nodejs-timer-in-ionic-2/47367655#47367655

[heyimalex]

I think the easiest fix is to use window.setInterval and window.clearInterval. It'd be cool if this was handled by default though.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.