TypeScript - Verwenden Sie die richtige Version von setTimeout (Knoten gegen Fenster).

Ich arbeite daran, alten TypeScript-Code auf die neueste Compiler-Version zu aktualisieren, und habe Probleme mit einem Aufruf von setTimeout. Der Code erwartet, die Browserfunktion aufzurufen, die setTimeouteine Nummer zurückgibt:

setTimeout(handler: (...args: any[]) => void, timeout: number): number;

Der Compiler löst dies jedoch stattdessen in der Knotenimplementierung auf, die einen NodeJS.Timer zurückgibt:

setTimeout(callback: (...args: any[]) => void, ms: number, ...args: any[]): NodeJS.Timer;

Dieser Code wird nicht im Knoten ausgeführt, aber die Knotentypisierungen werden als Abhängigkeit von etwas anderem abgerufen (nicht sicher, was).

Wie kann ich den Compiler anweisen, die setTimeoutgewünschte Version auszuwählen ?

Hier ist der fragliche Code:

let n: number;
n = setTimeout(function () { /* snip */  }, 500);

Dies erzeugt den Compilerfehler:

TS2322: Der Typ 'Timer' kann nicht dem Typ 'Nummer' zugewiesen werden.

Eine weitere Problemumgehung, die sich nicht auf die Variablendeklaration auswirkt:

let n: number;
n = <any>setTimeout(function () { /* snip */  }, 500);

Es sollte auch möglich sein, das windowObjekt explizit zu verwenden, ohne any:

let n: number;
n = window.setTimeout(function () { /* snip */  }, 500);

let timer: ReturnType<typeof setTimeout> = setTimeout(() => { ... });

clearTimeout(timer);

Durch die Verwendung erhalten ReturnType<fn>Sie Unabhängigkeit von der Plattform. Sie werden nicht gezwungen zu verwenden anyoder window.setTimeoutwas wird brechen, wenn Sie den Code no nodeJS Server ausführen (z. B. serverseitig gerenderte Seite).

Gute Nachrichten, das ist auch mit Deno kompatibel!

Ich denke, es hängt davon ab, wo Sie Ihren Code ausführen werden.

Wenn Ihr Laufzeitziel der serverseitige Node JS ist, verwenden Sie:

let timeout: NodeJS.Timeout;
global.clearTimeout(timeout);

Wenn Ihr Laufzeitziel ein Browser ist, verwenden Sie:

let timeout: number;
window.clearTimeout(timeout);

Ich hatte das gleiche Problem und die Problemumgehung, für die sich unser Team entschieden hat, bestand darin, "any" für den Timer-Typ zu verwenden. Z.B:

let n: any;
n = setTimeout(function () { /* snip */  }, 500);

Es funktioniert mit beiden Implementierungen der Methoden setTimeout / setInterval / clearTimeout / clearInterval.

Dies wird wahrscheinlich mit älteren Versionen funktionieren, aber mit TypeScript-Version ^3.5.3und Node.js-Version ^10.15.3sollten Sie in der Lage sein, die knotenspezifischen Funktionen aus dem Timer- Modul zu importieren , dh:

import { setTimeout } from 'timers';

Dadurch wird eine Instanz von Timeout vom Typ zurückgegeben NodeJS.Timeout, an die Sie übergeben können clearTimeout:

import { clearTimeout, setTimeout } from 'timers';

const timeout: NodeJS.Timeout = setTimeout(function () { /* snip */  }, 500);

clearTimeout(timeout);

• Wenn Sie hier eine echte Lösung für Typoskripte über Timer suchen, gehen wir wie folgt vor:

  Fehler ist im Rückgabetyp 'Nummer', es ist kein Timer oder irgendetwas anderes.

  Dies ist für Typoskripte Version ~> 2.7 Lösung:

export type Tick = null | number | NodeJS.Timer;

Jetzt haben wir alle behoben, erklären Sie einfach so:

 import { Tick } from "../../globals/types";

 export enum TIMER {
    INTERVAL = "INTERVAL",
    TIMEOUT = "TIMEOUT", 
 };

 interface TimerStateI {
   timeInterval: number;
 }

 interface TimerI: TimerStateI {
   type: string;
   autoStart: boolean;
   isStarted () : bool;
 }

     class myTimer extends React.Component<TimerI, TimerStateI > {

          private myTimer: Tick = null;
          private myType: string = TIMER.INTERVAL;
          private started: boll = false;

          constructor(args){
             super(args);
             this.setState({timeInterval: args.timeInterval});

             if (args.autoStart === true){
               this.startTimer();
             }
          }

          private myTick = () => {
            console.log("Tick");
          }    

          private startTimer = () => {

            if (this.myType === TIMER.INTERVAL) {
              this.myTimer = setInterval(this.myTick, this.timeInterval);
              this.started = true;
            } else if (this.myType === TIMER.TIMEOUT) {
              this.myTimer = setTimeout(this.myTick, this.timeInterval);
              this.started = true;
            }

          }

         private isStarted () : bool {
           return this.started;
         }

     ...
     }