如何在 Angular / TypeScript 项目中使用 IScroll答案

【问题标题】：How to use IScroll in an Angular / TypeScript project如何在 Angular / TypeScript 项目中使用 IScroll
【发布时间】：2018-12-20 19:04:43
【问题描述】：

我有一个Angular (Ionic) 应用程序，我需要在桌面上进行动量滚动（在Electron 内运行）。

这样做的一个有希望的方法可能是使用IScroll，但是我无法加载它。

我已经安装了，所以我的package.json中有以下内容

 "iscroll": "^5.2.0",

并且还通过npm install @types/iscroll@5.2.1安装了打字

首先，我无法导入，出现错误[ts] File 'd:/dev/capacitor/electron2/node_modules/@types/iscroll/index.d.ts' is not a module.

然后我尝试将以下内容添加到iscroll/index.d.ts..的底部。

export {IScroll};

它现在似乎消除了错误。

我现在添加了以下代码：

 public ngAfterViewInit() {
   var wrapper = document.getElementById('wrapper');
   var myScroll = new IScroll(wrapper);
 }

（我知道我应该并且将使用 @ViewChild() 只是试图让它开始工作）

这构建正常，但是当我进入测试页面时，我收到以下错误..

        Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_3_iscroll__.IScroll is not a constructor
    TypeError: __WEBPACK_IMPORTED_MODULE_3_iscroll__.IScroll is not a constructor
        at ListPage.webpackJsonp.190.ListPage.ngAfterViewInit (http://localhost:8100/build/main.js:114:24)
        at callProviderLifecycles (http://localhost:8100/build/vendor.js:13122:18)

在类型定义中，我们确实有以下...

declare class IScroll {
  constructor (element: string, options?: IScrollOptions);
  constructor (element: HTMLElement, options?: IScrollOptions);

有谁知道如何让它工作？

提前感谢您的帮助！

[更新1] 我的下一个尝试是从类型定义中删除导出，尝试如下导入。

import  'iscroll';

应用程序在没有 TypeScript 错误的情况下构建和运行，直到我们进入实例化 IScroll 的页面，此时错误变为

    Error: Uncaught (in promise): ReferenceError: IScroll is not defined
    ReferenceError: IScroll is not defined
        at ListPage.webpackJsonp.190.ListPage.ngAfterViewInit (http://localhost:8100/build/main.js:116:24)
        at callProviderLifecycles (http://localhost:8100/build/vendor.js:13122:18)

所以，还是没有。

[更新2]

尝试了@Jamshed 的建议

 import * as IScroll from 'iscroll'; or
 import IScroll from 'iscroll'; or
 import { IScroll } from 'iscroll'

所有这些都给予

[ts] File 'd:/dev/capacitor/electron2/node_modules/@types/iscroll/index.d.ts' is not a module

我确实尝试过添加“旧方式”。

所以我在 index.html 中添加了

<script src='D:/dev/capacitor/electron2/node_modules/iscroll/build/iscroll-lite.js'></script>

然后是 ts 组件文件中的declare var IScroll: any;。

但我又一次得到了

Error: Uncaught (in promise): ReferenceError: IScroll is not defined
    ReferenceError: IScroll is not defined

在运行时。

[更新3]

我找到了this post，但是如果我将他的index.d.ts 文件复制到我的文件中，我仍然无法import {IScroll}。我可以在其中看到许多其他导出，但不是 IScroll...

【问题讨论】：

尝试从'iscroll'导入*作为IScroll；或尝试从'iscroll'导入IScroll；或尝试从'iscroll'导入{IScroll}；
或导入到您的 index.html 中，然后声明 var IScroll;在你 some.component.ts
感谢@Jamshed，我已将 cmets 作为 UPDATE2 添加到这些文件中，以便获取格式。
我对此here 进行了跟进，我使用“手动解决方法”来至少加载库..

标签： javascript angular typescript ionic-framework

【解决方案1】：

我知道，已经 3 年过去了。但是我今天遇到了类似的需求，发现了这个：https://www.npmjs.com/package/@types/iscroll

只需将其添加到依赖项中，它将创建一个 Typescript 填充器

【讨论】：