Cannot find namespace NodeJS when using NodeJS.Tim

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) {
    }
}

Answer 1

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"
  ]
}

Answer 2

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.

Answer 3

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;