TypeScript - sử dụng đúng phiên bản setTimeout (nút so với cửa sổ)

Tôi đang tiến hành nâng cấp một số mã TypeScript cũ để sử dụng phiên bản trình biên dịch mới nhất và tôi đang gặp sự cố khi gọi tới setTimeout. Mã dự kiến ​​sẽ gọi setTimeouthàm của trình duyệt trả về một số:

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

Tuy nhiên, thay vào đó, trình biên dịch đang giải quyết vấn đề này cho việc triển khai nút, nó trả về một NodeJS.Timer:

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

Mã này không chạy trong nút, nhưng các kiểu gõ nút đang được kéo vào như một sự phụ thuộc vào một thứ khác (không chắc chắn là gì).

Làm cách nào để hướng dẫn trình biên dịch chọn phiên bản setTimeoutmà tôi muốn?

Đây là mã được đề cập:

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

Điều này tạo ra lỗi trình biên dịch:

TS2322: Không thể gán loại 'Bộ hẹn giờ' cho loại 'số'.

Một giải pháp khác không ảnh hưởng đến khai báo biến:

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

Ngoài ra, có thể sử dụng windowđối tượng một cách rõ ràng mà không cần any:

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

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

clearTimeout(timer);

Bằng cách sử dụng, ReturnType<fn>bạn đang độc lập với nền tảng. Bạn sẽ không bị buộc phải sử dụng anycũng không window.setTimeoutmà sẽ phá vỡ nếu bạn chạy các mã (server-side trang trả lại ví dụ.) Không có máy chủ nodeJS.

Tin tốt, điều này cũng tương thích với Deno!

Tôi đoán nó phụ thuộc vào nơi bạn sẽ chạy mã của mình.

Nếu mục tiêu thời gian chạy của bạn là Node JS phía máy chủ, hãy sử dụng:

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

Nếu mục tiêu thời gian chạy của bạn là một trình duyệt, hãy sử dụng:

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

Điều này có thể sẽ hoạt động với các phiên bản cũ hơn, nhưng với phiên bản TypeScript ^3.5.3và phiên bản Node.js ^10.15.3, bạn sẽ có thể nhập các chức năng dành riêng cho Node từ mô-đun Timers , tức là:

import { setTimeout } from 'timers';

Điều đó sẽ trả về một phiên bản của loại TimeoutNodeJS.Timeout mà bạn có thể chuyển đến clearTimeout:

import { clearTimeout, setTimeout } from 'timers';

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

clearTimeout(timeout);

Tôi gặp phải vấn đề tương tự và cách giải quyết mà nhóm chúng tôi quyết định sử dụng, chỉ là sử dụng "bất kỳ" cho loại bộ hẹn giờ. Ví dụ:

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

Nó sẽ hoạt động với cả việc triển khai các phương thức setTimeout / setInterval / clearTimeout / clearInterval.

• Nếu bạn muốn có giải pháp thực sự cho bản đánh chữ về bộ định thời thì ở đây chúng ta hãy:

  Lỗi trả lại là loại 'số' nó không phải là Hẹn giờ hay bất cứ thứ gì khác.

  Đây là giải pháp cho phiên bản typecripts ~> 2.7:

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

Bây giờ chúng ta đã sửa tất cả, chỉ cần khai báo như thế này:

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

     ...
     }