如何从远程 js 文件中使用 Typescript 中的方法动态扩展类？答案

【问题标题】：How to dynamically extend class with method in Typescript from remote js file?如何从远程 js 文件中使用 Typescript 中的方法动态扩展类？
【发布时间】：2017-02-20 09:30:51
【问题描述】：

我有带有组件类的 TypeScript 代码。我想以某种方式使用远程 js 文件来远程扩展这些类。所以我想当我的应用程序开始远程获取 js 文件并使用代码来扩展所需的类。我知道如何扩展课程。例如：

Import { UsersBlocksMyOrders } from "../pages/users/blocks/myorders";

declare module "../pages/users/blocks/myorders" {
    interface UsersBlocksMyOrders {
        logit(): void;
    }
}

UsersBlocksMyOrders.prototype.logit = function () { console.log(this); }

在组件文件中的代码是：

import { APP_CONFIG } from "../../../app/app.config";

@Component({
  selector: 'menu-blocks-menupage',
  templateUrl: APP_CONFIG.appDomain + '/mobilesiteapp/template/?path=pages/menu/blocks/menupage'
})

export class MenuBlocksMenuPage{

  constructor(){
    this.logit();
  }
}

我的问题是我使用 Webpack 来编译代码。 Webpack 创建函数名称不同的最终文件。这就是我无法直接访问课程的原因。

遇到这种情况怎么办？

【问题讨论】：

标签： javascript extends typescript2.0

【解决方案1】：

创建服务以获取文件和扩展类。您需要在类中有变量，该变量将存储有键的对象。键是要扩展的类的名称。以及带有导入类的值。在 init 函数中，我们使用原型方法进行循环扩展。

import { Http } from "@angular/http";
import { MenuBlocksMenuPage } from "../pages/menu/blocks/menupage";


export class ExtendService {
  allModules = {
    ...
    MenuBlocksMenuPage : MenuBlocksMenuPage,
    ...
  };

  constructor(public http: Http){ }

  init()
  {
    //Load json map to extend class
    this.http.get(APP_CONFIG.appDomain + '/modules/mobilesiteapp/view/js/extend.json').toPromise()
      .then((res) => {
        let json = res.json();

        //Loop each class to extend
        Object.keys(json).forEach((cl) => {
          //Add new functions and methods
          Object.keys(json[cl]).forEach((func) => {
            this.allModules[cl].prototype[func] = eval(json[cl][func]);
          });
        });

      }).catch((e) => {
        console.error(e);
      });
  }
}

请求带有函数的 json 文件以进行评估。

{
    "MenuBlocksMenuPage": {
        "logit": "(function (){console.log(this);})"
    }
}

【讨论】：