reactjs - Bruke setInterval() i Typescript React

Jeg prøver å konvertere et React-basert tidtaker-eksempel til TypeScript.

Klassen ser litt slik ut:

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
    }

    // ...

I componentWillUnmount() har this.timerID en feil:

[ts] Argument av typen 'Timeout | undefined' kan ikke tildeles parameter av typen 'number | undefined'. Typen 'Timeout' kan ikke tildeles typen 'number'. [2345]

Jeg har sjekket index.d.ts, som erklærer clearInterval():

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

Så det ser ut som jeg sender et korrekt typet argument til clearInterval(), og likevel forventer den et tall. Hva bør jeg sende inn, vær så snill?

Rediger: hvis jeg endrer min timerID-deklarasjon, vises en feil i this.timerID i componentDidMount():

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

Svar #1

NodeJS.Timeout er ment å brukes når du kjører i node-miljøet. Siden du vil bruke nettleser-APIer, må du bruke number som type for timerID.

Også bør ikke de innebygde funksjonene løse typene sine fra node-typedefinisjoner, i ditt tilfelle. Hvis du har @types/node installert, vennligst avinstaller det hvis det ikke er nødvendig. Det kan være i konflikt med typene du trenger å bruke.

Svar #2

React bruker JavaScripts vanlige setInterval, som returnerer et tall. Sjekk setInterval på MDN

Det returnerte intervalID er en numerisk, ikke-null verdi

Imidlertid er returtypen du refererer til, NodeJS.Timeout, den som returneres av Nodes setInterval. Den er spesifikk for Node.js.

Klasse: Timeout:

"Dette objektet opprettes internt og returneres fra setTimeout() og setInterval()"

Timeout kan ikke tilordnes et tall betyr at du deklarerer den forventede typen som Nodes Timeout, men det som faktisk blir mottatt er et tall.

Relaterte artikler