TypeScript - użyj poprawnej wersji setTimeout (węzeł vs okno)

Pracuję nad uaktualnieniem starego kodu TypeScript do najnowszej wersji kompilatora i mam problem z wywołaniem do setTimeout. Kod oczekuje wywołania funkcji przeglądarki, setTimeoutktóra zwraca liczbę:

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

Jednak kompilator zamiast tego rozwiązuje to na implementację węzła, która zwraca NodeJS.Timer:

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

Ten kod nie działa w węźle, ale typy węzłów są pobierane jako zależność od czegoś innego (nie wiem co).

Jak mogę poinstruować kompilator, aby wybrał wersję setTimeout, której chcę?

Oto kod, o którym mowa:

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

Powoduje to błąd kompilatora:

TS2322: Typu „Timer” nie można przypisać do typu „numer”.

Inne obejście, które nie ma wpływu na deklarację zmiennej:

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

Powinno być również możliwe windowjawne użycie obiektu bez any:

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

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

clearTimeout(timer);

Korzystając z ReturnType<fn>niej uzyskujesz niezależność od platformy. Nie będzie zmuszony do korzystania anyani window.setTimeoutktóry będzie złamać jeśli uruchomić kod żaden serwer nodeJS (np. Server-side wygenerowana strona).

Dobra wiadomość, to jest również kompatybilne z Deno!

Myślę, że zależy to od tego, gdzie będziesz uruchamiać swój kod.

Jeśli celem środowiska wykonawczego jest Node JS po stronie serwera, użyj:

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

Jeśli celem środowiska wykonawczego jest przeglądarka, użyj:

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

Prawdopodobnie zadziała to ze starszymi wersjami, ale z wersją TypeScript ^3.5.3i wersją Node.js ^10.15.3powinieneś być w stanie zaimportować funkcje specyficzne dla węzła z modułu Timers , tj .:

import { setTimeout } from 'timers';

Że zwróci instancję Timeout typu NodeJS.Timeout, które można przekazać do clearTimeout:

import { clearTimeout, setTimeout } from 'timers';

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

clearTimeout(timeout);

Zmierzyłem się z tym samym problemem i rozwiązaniem, które nasz zespół zdecydował się zastosować, było po prostu użycie „any” dla typu timera. Na przykład:

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

Będzie działać z obiema implementacjami metod setTimeout / setInterval / clearTimeout / clearInterval.

• Jeśli chcesz prawdziwego rozwiązania dla maszynopisu dotyczącego timerów, zaczynamy:

  Błąd jest w zwracanym typie „liczba”, nie jest to Timer ani nic innego.

  Dotyczy to rozwiązania dla maszynopisów w wersji ~> 2.7:

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

Teraz naprawiliśmy wszystko, po prostu zadeklaruj w ten sposób:

 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;
         }

     ...
     }

Jeśli celem setIntervaljest window. Następnie możesz również zapisać go jako

let timerId: number = setInterval((()=>{
    this.populateGrid(true)
  }) as TimerHandler, 5*1000)
}