reactjs - Utilizarea setInterval() în Typescript React

Încerc să convertesc un exemplu de cronometru bazat pe React în Typescript.

Clasa arată puțin așa:

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
    }

    // ...

În componentWillUnmount() this.timerID are o eroare:

[ts] Argumentul de tip 'Timeout | undefined' nu poate fi atribuit parametrului de tip 'number | undefined'. Tipul 'Timeout' nu poate fi atribuit tipului 'number'. [2345]

Am verificat index.d.ts, care declară clearInterval():

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

Se pare că trec un argument de tip corect în clearInterval() și totuși acesta așteaptă un număr. Ce ar trebui să trec, vă rog?

Editare: dacă îmi schimb declarația timerID apare o eroare în this.timerID în componentDidMount():

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

Răspuns #1

NodeJS.Timeout este destinat să fie folosit atunci când rulezi în mediul node. Deoarece vrei să folosești API-urile browserului, va trebui să folosești number ca tip pentru timerID.

De asemenea, funcțiile încorporate nu ar trebui să-și rezolve tipurile din definițiile tipului node, în cazul tău. Dacă ai @types/node instalat, te rugăm să-l dezinstalezi dacă nu este necesar. Acesta poate intra în conflict cu tipurile pe care trebuie să le folosești.

Răspunsul #2

React folosește setInterval-ul standard din JavaScript, care returnează un număr. Verifică setInterval pe MDN

IntervalulID returnat este o valoare numerică, nenulă

Totuși, tipul de returnare la care te referi, NodeJS.Timeout, este cel returnat de setInterval-ul din Node. Acesta este specific pentru Node.js.

Clasă: Timeout:

"Acest obiect este creat intern și este returnat de setTimeout() și setInterval()"

Timeout nu poate fi atribuit unui număr înseamnă că declarați tipul așteptat ca Timeout al Node-ului, iar ceea ce este primit efectiv este un număr.