javascript - TS2769: How to fix "clearTimeout" with return value from setTimeout in TypeScript? - Stack Overfl

admin管理员组

文章数量:1324111

In "normal" JavaScript, I can do the following:

var timer = setTimeout( myFunc, 1000 );
clearTimout(timer);

But in TypeScript, the setTimeout-Function has a strange return value NodeJS.Timer, which can't be used for clearTimeout since clearTimeout requires a number.

How to fix that?

After some research I found the following type-cast:

let timer: null | ReturnType<typeof setTimeout> = null;
timer = setTimeout( myFunc, 1000 );

However, calling

clearTimeout(timer)

via TypeScript gives the following error:

TS2769: No overload matches this call.
  Overload 1 of 2, '(timeoutId: Timeout): void', gave the following error.
    Argument of type 'Timeout | null' is not assignable to parameter of type 'Timeout'.
      Type 'null' is not assignable to type 'Timeout'.
  Overload 2 of 2, '(handle?: number | undefined): void', gave the following error.
    Argument of type 'Timeout | null' is not assignable to parameter of type 'number | undefined'.

In "normal" JavaScript, I can do the following:

var timer = setTimeout( myFunc, 1000 );
clearTimout(timer);

But in TypeScript, the setTimeout-Function has a strange return value NodeJS.Timer, which can't be used for clearTimeout since clearTimeout requires a number.

How to fix that?

After some research I found the following type-cast:

let timer: null | ReturnType<typeof setTimeout> = null;
timer = setTimeout( myFunc, 1000 );

However, calling

clearTimeout(timer)

via TypeScript gives the following error:

TS2769: No overload matches this call.
  Overload 1 of 2, '(timeoutId: Timeout): void', gave the following error.
    Argument of type 'Timeout | null' is not assignable to parameter of type 'Timeout'.
      Type 'null' is not assignable to type 'Timeout'.
  Overload 2 of 2, '(handle?: number | undefined): void', gave the following error.
    Argument of type 'Timeout | null' is not assignable to parameter of type 'number | undefined'.

• javascript
• typescript

Share Improve this question Follow asked Apr 18, 2021 at 22:00 deletedelete 19.2k1717 gold badges6262 silver badges9898 bronze badges 4

• 1 But in TypeScript, the setTimeout-Function has a strange return value NodeJS.Timer, which can't be used for clearTimeout since clearTimeout requires a number. clearTimeout accepts the value returned by setTimeout. – tkausl Commented Apr 18, 2021 at 22:05
• 4 You specified that timer can be null, but overload 1 (taking Timeout) does not accept null. Either assign in one statement, or use a null guard (if statement) – Lesiak Commented Apr 18, 2021 at 22:19
• 1 "But in TypeScript, the setTimeout-Function has a strange return value NodeJS.Timer" - no. It has that return type in Node.js, and it seems you have configured your Typescript to assume a node environment. And in node, clearTimeout also accepts such a timer object. – Bergi Commented Apr 18, 2021 at 23:19
• @delete what's the contents of your tsconfig.json? – Lambda Fairy Commented Apr 19, 2021 at 0:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

If you are still looking for answer, you need to mention that you are accessing timeouts from window object instead of node

const { setTimeout, clearTimeout } = window

const timerId = setTimeout(() => {
... timeout code here
}, timeoutInMilliSeconds)


// Clear out the timer later
clearTimeout(timerID)

TS playground with window object

Add guard against null:

let timer: null | ReturnType<typeof setTimeout> = null;
timer = setTimeout( myFunc, 1000 );

if (timer) {
  clearTimeout(timer);
}

I got the similar problem and managed to fix it with non-null assertion operator to tell the piler that "the expression cannot be null or undefined"

let timer: null | ReturnType<typeof setTimeout> = null;
timer = setTimeout(myFunc, 1000);

clearTimeout(timer!);

本文标签：