javascript - 如何使用 Angular 8 访问 TypeScript 中的 JavaScript 内容(或扩展其他 JS 文件的 JavaScript 文件)

Question

我在 Angular 8 应用程序中使用 JavaScript 库 OpenSeadragon。所以通常的做法是在angular.json的scripts部分注册javascript.min.js文件，然后在TypeScript中使用，方法如下:

declare var OpenSeadragon: any;

然后我可以像这样在我的 TypeScript 组件中使用 OpenSeadragon:

const test: any = OpenSeadragon({});  

所以，这是有效的。

对于这个库，有几个插件/扩展。我需要使用其中一些插件。它们依赖于导入主/核心库。所以我也在 angular.json scripts 部分添加了插件的 js 文件。

"scripts": [
  "./node_modules/openseadragon/build/openseadragon/openseadragon.min.js",       
  "./node_modules/openseadragonselection/dist/openseadragonselection.js"
]

这些插件的结构是它们以下列方式扩展核心功能:

    $.Viewer.prototype.selection = function(options) {
        if (!this.selectionInstance || options) {
            options = options || {};
            options.viewer = this;
            this.selectionInstance = new $.Selection(options);
        }
        return this.selectionInstance;
    };  

对于主库中的Viewer 对象/实例，他们引入了一个名为selection({withOptions})的新方法

问题是我怎样才能在我的 Angular TypeScript 组件中访问新方法？目前我收到方法选择不存在的错误。

Answer 1

您可以尝试更改声明中的 any 值并添加特定类型，或者您可以添加如下内容:

declare global {
  interface OpenSeadragon {
    selection: (options:any) => any;
  }
}