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 : '타이머'유형은 '번호'유형에 할당 할 수 없습니다.

변수 선언에 영향을주지 않는 또 다른 해결 방법 :

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에서는 Timers 모듈 에서 노드 별 함수를 가져올 수 있습니다 . 예 :

import { setTimeout } from 'timers';

그러면 전달할 수 있는 유형 의 Timeout 인스턴스가 반환 NodeJS.Timeout됩니다 clearTimeout.

import { clearTimeout, setTimeout } from 'timers';

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

clearTimeout(timeout);

나는 동일한 문제에 직면했고 우리 팀이 사용하기로 결정한 해결 방법은 타이머 유형에 "any"를 사용하는 것입니다. 예 :

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

     ...
     }