Cannot find namespace NodeJS when using NodeJS.Timer in Ionic 2

Question

I am attempting to use some code I found on https://github.com/bevacqua/dragula/issues/289#issuecomment-277143172 to my Ionic project.

When I run the code I get an error Cannot find namespace 'NodeJS' and the error refers to touchTimeout: NodeJS.Timer;

How can I adapt the code below to make the NodeJS.Timer line work?

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({ selector: '[delayDragLift]' })
export class DelayDragLiftDirective {

    dragDelay: number = 200; // milliseconds
    draggable: boolean = false;
    touchTimeout: NodeJS.Timer;

    @HostListener('touchmove', ['$event'])
    // @HostListener('mousemove', ['$event'])
    onMove(e: Event) {
        if (!this.draggable) {
            e.stopPropagation();
            clearTimeout(this.touchTimeout);
        }
    }

    @HostListener('touchstart', ['$event'])
    // @HostListener('mousedown', ['$event'])
    onDown(e: Event) {
        this.touchTimeout = setTimeout(() => {
            this.draggable = true;
        }, this.dragDelay);
    }

    @HostListener('touchend', ['$event'])
    // @HostListener('mouseup', ['$event'])
    onUp(e: Event) {
        clearTimeout(this.touchTimeout);
        this.draggable = false;
    }

    constructor(private el: ElementRef) {
    }
}

Does this answer your question? TypeScript - use correct version of setTimeout (node vs window) — Rafael Tavares
– Rafael Tavares, Commented Oct 6, 2021 at 17:22

Liam · Accepted Answer · 2019-03-22 15:43:50Z

111

Open src/tsconfig.app.json*.

Add "node" to the "types" array.

Example:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

*if this file does not exist add the specified part to tsconfig.json in root folder.

edited Mar 22, 2019 at 15:43

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Nov 18, 2017 at 15:23

Martin Schneider

15.7k8 gold badges63 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Schneider · Accepted Answer · 2024-10-23 08:06:31Z

35

A quick way to solve this problem is here.

Basically change setTimeout and clearInterval to window.setTimeout and window.clearInterval, respectively. For example, your onDown becomes:

onDown(e: Event) {
    this.touchTimeout = window.setTimeout(() => {
        this.draggable = true;
    }, this.dragDelay);
}

Then, your declaration becomes:

this.touchTimeout: number | undefined;

edited Oct 23, 2024 at 8:06

Martin Schneider

15.7k8 gold badges63 silver badges64 bronze badges

answered Feb 3, 2019 at 20:22

cham

11.2k12 gold badges54 silver badges71 bronze badges

9 Comments

muuvmuuv Over a year ago

This should be accepted, since you shouldn't include node types into an Angular project which is targeting browsers.

Anand Raja Over a year ago

Return type of setTimeout is not a number, it's of type NodeJS.Timeout

Martin Schneider Over a year ago

@AnandRaja You have violated the edit rules "When should I edit posts?" point 2: "To clarify the meaning of the post (without changing that meaning)". The author of this post points out that when setTimeout is called in a client-side application or website, it always calls window.setTimeout, which in fact returns a number, not a NodeJS.Timeout. Your edit should have been either a comment or a separate answer, both of which you actually did. :|

Anand Raja Over a year ago

Hello @MartinSchneider, I have not violated the rule. You answer is wrong, that's why I had to edit it. The retun type is NodeJS.Timer. Could you please check your editor with this line private touchTimeout?: ReturnType<typeof setTimeout>;. This line will make you understand. Attachments are not allowed, otherwise, I could have added the one for your reference.

Martin Schneider Over a year ago

@AnandRaja In some editors the return type might be NodeJS.Timeout as they target the NodeJS runtime by default. But browsers (where an Ionic app is most probably run) do not share the same APIs with NodeJS. That's why this question here exists. Please open the console in your browser and run: let foo = setTimeout(() => console.log('hey'), 1000); typeof(foo). And even if I'm wrong, either way you changed the meaning of the original answer :P

|

Anand Raja · Accepted Answer · 2024-10-23 17:21:37Z

1

if NodeJS.Timeout throws error, you can modify your variable declaration as below:

private touchTimeout?: ReturnType<typeof setTimeout>;

This special ReturnType provision will give you the type as NodeJS.Timeout.

FYI,

edited Oct 23, 2024 at 17:21

answered Sep 20, 2024 at 9:14

Anand Raja

3,2161 gold badge39 silver badges40 bronze badges

Comments

Gilberto Alexandre · Accepted Answer · 2019-10-14 22:40:33Z

-3

To me, solve include the typeRoots member in compilerOptions from tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "typeRoots": [
         "node_modules/@types"
     ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

answered Oct 14, 2019 at 22:40

Gilberto Alexandre

2,3871 gold badge20 silver badges21 bronze badges

Collectives™ on Stack Overflow

Cannot find namespace NodeJS when using NodeJS.Timer in Ionic 2

4 Answers 4

Comments

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related