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

Question

我有一个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);

有谁知道如何让这个工作？

在此先感谢您的帮助！

[UPDATE1]我的下一次尝试是从类型定义中删除导出，尝试如下导入。

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>

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

但我再一次得到

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

在运行时。

[更新3]

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

Answer 1

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

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