在 Ionic 2 中使用 NodeJS.Timer 时找不到命名空间 NodeJS

Posted 2023-03-16

【中文标题】在 Ionic 2 中使用 NodeJS.Timer 时找不到命名空间 NodeJS

【英文标题】：Cannot find namespace NodeJS when using NodeJS.Timer in Ionic 2

【发布时间】：2018-01-01 02:07:38

【问题描述】：

我正在尝试将在 https://github.com/bevacqua/dragula/issues/289#issuecomment-277143172 上找到的一些代码用于我的 Ionic 项目。

当我运行代码时，我收到一个错误Cannot find namespace 'NodeJS'，该错误指的是touchTimeout: NodeJS.Timer;

如何修改下面的代码以使NodeJS.Timer 行工作？

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) 
    

【问题讨论】：

这能回答你的问题吗？ TypeScript - use correct version of setTimeout (node vs window)

【参考方案1】：

打开src/tsconfig.app.json*。

将"node" 添加到"types" 数组中。

例子：

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

*如果此文件不存在，则将指定部分添加到根文件夹中的tsconfig.json。

【参考方案2】：

解决此问题的快速方法是here。

基本上将setTimeout 和clearInterval 分别更改为window.setTimeout 和window.clearInterval。例如，您的 onDown 变为：

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

那么，你的声明变成：

this.touchTimeout: number | undefined;

【讨论】：

这应该被接受，因为您不应该将节点类型包含到针对浏览器的 Angular 项目中。

【参考方案3】：

对我来说，解决在 tsconfig.json 的 compilerOptions 中包含 typeRoots 成员

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