TypeScript - utilisez la version correcte de setTimeout (node ​​vs window)

Je travaille sur la mise à niveau d'un ancien code TypeScript pour utiliser la dernière version du compilateur, et j'ai des problèmes avec un appel à setTimeout. Le code s'attend à appeler la setTimeoutfonction du navigateur qui renvoie un nombre:

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

Cependant, le compilateur résout cela à la place de l'implémentation du nœud, qui renvoie un NodeJS.Timer:

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

Ce code ne s'exécute pas dans le nœud, mais les types de nœud sont extraits en tant que dépendance à quelque chose d'autre (je ne sais pas quoi).

Comment puis-je demander au compilateur de choisir la version setTimeoutque je souhaite?

Voici le code en question:

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

Cela produit l'erreur du compilateur:

TS2322: Le type 'Timer' n'est pas attribuable au type 'number'.

Une autre solution de contournement qui n'affecte pas la déclaration de variable:

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

De plus, il devrait être possible d'utiliser l' windowobjet explicitement sans any:

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

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

clearTimeout(timer);

En utilisant, ReturnType<fn>vous obtenez l'indépendance de la plate-forme. Vous ne serez pas obligé d'utiliser anyni window.setTimeoutqui ne cassera si vous exécutez le code no nodeJS server (par exemple, page de rendu côté serveur).

Bonne nouvelle, c'est aussi compatible avec Deno!

Je suppose que cela dépend de l'endroit où vous exécuterez votre code.

Si votre cible d'exécution est Node JS côté serveur, utilisez:

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

Si votre cible d'exécution est un navigateur, utilisez:

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

Cela fonctionnera probablement avec les versions plus anciennes, mais avec la version TypeScript ^3.5.3et la version Node.js ^10.15.3, vous devriez être en mesure d'importer les fonctions spécifiques au nœud depuis le module Timers , c'est-à-dire:

import { setTimeout } from 'timers';

Cela renverra une instance de Timeout de type NodeJS.Timeoutque vous pouvez passer à clearTimeout:

import { clearTimeout, setTimeout } from 'timers';

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

clearTimeout(timeout);

J'ai été confronté au même problème et la solution de contournement que notre équipe a décidé d'utiliser était simplement d'utiliser "any" pour le type de minuterie. Par exemple:

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

Il fonctionnera avec les deux implémentations des méthodes setTimeout / setInterval / clearTimeout / clearInterval.

• Si vous voulez une vraie solution pour dactylographié sur les minuteries, nous y allons:

  Le bogue est dans le type de retour «nombre» ce n'est pas Timer ou autre chose.

  Ceci est pour la solution dactylographié ~> 2.7:

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

Maintenant, nous avons tout corrigé, déclarez simplement comme ceci:

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

     ...
     }