TypeScript - gunakan versi setTimeout yang benar (node ​​vs window)

Saya sedang mengupgrade beberapa kode TypeScript lama untuk menggunakan versi kompiler terbaru, dan saya mengalami masalah dengan panggilan ke setTimeout. Kode mengharapkan untuk memanggil fungsi browser setTimeoutyang mengembalikan angka:

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

Namun, kompilator menyelesaikan ini ke implementasi node, yang mengembalikan NodeJS.Timer:

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

Kode ini tidak berjalan dalam node, tetapi pengetikan node ditarik sebagai ketergantungan pada sesuatu yang lain (tidak yakin apa).

Bagaimana saya dapat menginstruksikan kompilator untuk memilih versi setTimeoutyang saya inginkan?

Berikut kode yang dimaksud:

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

Ini menghasilkan kesalahan kompiler:

TS2322: Ketik 'Timer' tidak dapat digunakan untuk mengetik 'nomor'.

Solusi lain yang tidak memengaruhi deklarasi variabel:

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

Juga, harus dimungkinkan untuk menggunakan windowobjek secara eksplisit tanpaany :

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

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

clearTimeout(timer);

Dengan menggunakan ReturnType<fn>Anda mendapatkan kemerdekaan dari platform. Anda tidak akan dipaksa untuk menggunakan anyatau window.setTimeoutyang akan rusak jika Anda menjalankan kode tanpa server nodeJS (mis. Halaman yang dirender sisi server).

Kabar baiknya, ini juga kompatibel dengan Deno!

Saya kira itu tergantung di mana Anda akan menjalankan kode Anda.

Jika target waktu proses Anda adalah Node JS sisi server, gunakan:

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

Jika target waktu proses Anda adalah browser, gunakan:

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

Ini kemungkinan akan bekerja dengan versi yang lebih lama, tetapi dengan versi TypeScript ^3.5.3dan versi Node.js ^10.15.3, Anda harus dapat mengimpor fungsi khusus Node dari modul Timers , yaitu:

import { setTimeout } from 'timers';

Itu akan mengembalikan instance dari tipe TimeoutNodeJS.Timeout yang dapat Anda teruskan ke clearTimeout:

import { clearTimeout, setTimeout } from 'timers';

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

clearTimeout(timeout);

Saya menghadapi masalah yang sama dan solusi yang diputuskan oleh tim kami untuk digunakan, hanya menggunakan "apa saja" untuk jenis pengatur waktu. Misalnya:

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

Ini akan bekerja dengan kedua implementasi metode setTimeout / setInterval / clearTimeout / clearInterval.

• Jika Anda ingin solusi nyata untuk skrip ketikan tentang pengatur waktu, ini dia:

  Bug dalam jenis 'nomor' kembali itu bukan Timer atau apa pun.

  Ini untuk solusi ketikan versi ~> 2.7:

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

Sekarang kita perbaiki semua, cukup nyatakan seperti ini:

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

     ...
     }

Jika Anda menargetkan setIntervaldari window. Kemudian Anda juga bisa menulisnya sebagai

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