TypeScript - ใช้ setTimeout เวอร์ชันที่ถูกต้อง (โหนดเทียบกับหน้าต่าง)

ฉันทำงานเกี่ยวกับการอัพเกรดรหัส typescript setTimeoutบางเก่าที่จะใช้รุ่นคอมไพเลอร์ล่าสุดและฉันมีปัญหากับการเรียกร้องให้ รหัสคาดว่าจะเรียกใช้setTimeoutฟังก์ชันของเบราว์เซอร์ซึ่งส่งคืนตัวเลข:

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

อย่างไรก็ตามคอมไพลเลอร์กำลังแก้ไขสิ่งนี้กับการนำโหนดไปใช้แทนซึ่งจะส่งคืน NodeJS.Timer:

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

รหัสนี้ไม่ทำงานในโหนด แต่การพิมพ์ของโหนดจะถูกดึงเข้ามาเป็นการอ้างอิงกับสิ่งอื่น (ไม่แน่ใจว่าอะไร)

ฉันจะสั่งให้คอมไพเลอร์เลือกเวอร์ชันsetTimeoutที่ฉันต้องการได้อย่างไร

นี่คือรหัสที่เป็นปัญหา:

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

สิ่งนี้ก่อให้เกิดข้อผิดพลาดของคอมไพเลอร์:

TS2322: ประเภท 'Timer' ไม่สามารถกำหนดให้พิมพ์ 'number' ได้

วิธีแก้ปัญหาอื่นที่ไม่มีผลต่อการประกาศตัวแปร:

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

นอกจากนี้ควรใช้windowวัตถุอย่างชัดเจนโดยไม่ต้องany:

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

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

clearTimeout(timer);

เมื่อใช้ReturnType<fn>คุณจะได้รับความเป็นอิสระจากแพลตฟอร์ม คุณจะไม่ถูกบังคับให้ใช้anyมิได้window.setTimeoutซึ่งจะแตกถ้าคุณเรียกใช้รหัสไม่มีเซิร์ฟเวอร์ nodeJS (เช่น. ฝั่งเซิร์ฟเวอร์หน้าแสดงผล)

ข่าวดีนี้เข้ากันได้กับ Deno!

ฉันเดาว่ามันขึ้นอยู่กับว่าคุณจะรันโค้ดของคุณที่ไหน

หากเป้าหมายรันไทม์ของคุณคือ Node JS ฝั่งเซิร์ฟเวอร์ให้ใช้:

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

หากเป้าหมายรันไทม์ของคุณคือเบราว์เซอร์ให้ใช้:

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

สิ่งนี้น่าจะใช้ได้กับเวอร์ชันเก่า แต่สำหรับเวอร์ชัน TypeScript ^3.5.3และเวอร์ชันNode.js ^10.15.3คุณควรจะสามารถนำเข้าฟังก์ชันเฉพาะโหนดจากโมดูลตัวจับเวลาได้เช่น:

import { setTimeout } from 'timers';

ซึ่งจะส่งคืนอินสแตนซ์ของประเภทTimeoutNodeJS.Timeoutที่คุณสามารถส่งผ่านไปยังclearTimeout:

import { clearTimeout, setTimeout } from 'timers';

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

clearTimeout(timeout);

ฉันประสบปัญหาเดียวกันและวิธีแก้ปัญหาที่ทีมของเราตัดสินใจใช้คือใช้ "ใดก็ได้" สำหรับประเภทตัวจับเวลา เช่น:

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

มันจะทำงานกับทั้งการใช้งานของเมธอด setTimeout / setInterval / clearTimeout / clearInterval

• หากคุณต้องการวิธีแก้ปัญหาที่แท้จริงสำหรับ typescript เกี่ยวกับตัวจับเวลาเราไปที่นี่:

  ข้อผิดพลาดอยู่ในประเภท 'number' กลับไม่ใช่ Timer หรืออย่างอื่น

  นี่สำหรับโซลูชัน typescripts เวอร์ชัน ~> 2.7:

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

ตอนนี้เราแก้ไขทั้งหมดแล้วเพียงแค่ประกาศดังนี้:

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

     ...
     }

หากคุณกำหนดเป้าหมายของsetInterval windowจากนั้นคุณสามารถเขียนเป็นไฟล์

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