在Typescript中，为从库中创建的类创建扩展方法

我想向来自库的现有类添加一些方法

已知一些基本类型，如

字符串

，

元素

可以通过

接口

进行扩展，并将其添加到

原型

interface String {
 extFunc():Function;
}

String.prototype.extFunc = function () {
  //blabla
};

"a".extFunc();

我还找到了添加

Observable

扩展方法的方法

---

您的问题是如何扩展类，但您的代码显示了接口

如何从库扩展类：

class LibraryThing {
    // this is a class from a library
    doSomething(){
    }
}

class MyThing extends LibraryThing {
    // here you can add your own methods to the existing class
    doMyThing(){
    }
}

现在，您可以创建一个虚构实例，该实例将包含所有库方法和您自己的方法：

let t = new MyThing();
t.doSomething();
t.doMyThing();

如果您想使用接口，您可以简单地实现它们。您可以实现现有的库接口，并使用自己的接口对其进行补充

interface LibraryInterface {}
interface MyOwnInterface {}

class CoolThing implements LibraryInterface, MyOwnInterface {
    // this class uses methods from the library interface and your own
}

使用typescript时，不需要原型

编辑

我没有尝试过这样做，但是您可以传递自己的类来扩展navcontroller，而不是在构造函数中传递navcontroller

import {Component} from '@angular/core';

import {CustomController} from '../mystuff/customcontroller';    
import {GuidePage} from '../guide/guide.component';

@Component({
  selector: 'page-home',
  templateUrl: 'home.component.html'
})
export class HomePage {
  pageName = "home";

  // here we receive our own CustomController
  constructor(public navCtrl: CustomController) {}

  gotoGuide(): void {
    this.navCtrl.myOwnCustomStuff();
  }
}

在CustomController中，您可以导入Navcontroller并对其进行扩展：

import { Injectable } from '@angular/core'
import {NavController} from 'ionic-angular'

@injectable()
export class CustomController extends NavController {
}

我还没有测试过这是否允许用于离子成分

您还必须注册自己的新可注射药物作为angular DI的提供者，按照

中的步骤进行操作。好的，我参考以下代码并用以下代码解决我的问题

在

polyfill.ts中

import {Page} from 'ionic-angular/navigation/nav-util';
// the class we wanna create extension method
import {NavController} from 'ionic-angular/navigation/nav-controller';
// ionic provide this as NavController
import {NavControllerBase} from 'ionic-angular/navigation/nav-controller-base';

// add extension method on both class via interface
declare module "ionic-angular/navigation/nav-controller" {
  interface NavController {
    // replacePage?: typeof replacePage;
    replacePage(page: Page, data?: any);
  }
}
declare module "ionic-angular/navigation/nav-controller-base" {
  interface NavControllerBase {
    // replacePage?: typeof replacePage;
    replacePage(page: Page, data?: any);
  }
}

// define extension method 
function replacePage(this: NavController, page: Page, data?: any): Promise<any> {
  return this.push(page, data).then(() => {
    let index = this.getActive().index;
    this.remove(index - 1);
  });
}

// finally add this function to the class that ionic provide
NavControllerBase.prototype.replacePage = replacePage;

---

通过这种方式在其他类上添加扩展方法，希望以后能对其他人有所帮助。

感谢您的回答，但我要添加方法的类来自angular2的依赖项注入，换句话说，它来自构造函数（）。请参见此处了解更多详细信息。也许你可以用你的实际代码来澄清你的问题，包括依赖注入。好的！我已经发布了我的实际代码，谢谢你的建议。

import {Component} from '@angular/core';

import {CustomController} from '../mystuff/customcontroller';    
import {GuidePage} from '../guide/guide.component';

@Component({
  selector: 'page-home',
  templateUrl: 'home.component.html'
})
export class HomePage {
  pageName = "home";

  // here we receive our own CustomController
  constructor(public navCtrl: CustomController) {}

  gotoGuide(): void {
    this.navCtrl.myOwnCustomStuff();
  }
}

import { Injectable } from '@angular/core'
import {NavController} from 'ionic-angular'

@injectable()
export class CustomController extends NavController {
}

import {Page} from 'ionic-angular/navigation/nav-util';
// the class we wanna create extension method
import {NavController} from 'ionic-angular/navigation/nav-controller';
// ionic provide this as NavController
import {NavControllerBase} from 'ionic-angular/navigation/nav-controller-base';

// add extension method on both class via interface
declare module "ionic-angular/navigation/nav-controller" {
  interface NavController {
    // replacePage?: typeof replacePage;
    replacePage(page: Page, data?: any);
  }
}
declare module "ionic-angular/navigation/nav-controller-base" {
  interface NavControllerBase {
    // replacePage?: typeof replacePage;
    replacePage(page: Page, data?: any);
  }
}

// define extension method 
function replacePage(this: NavController, page: Page, data?: any): Promise<any> {
  return this.push(page, data).then(() => {
    let index = this.getActive().index;
    this.remove(index - 1);
  });
}

// finally add this function to the class that ionic provide
NavControllerBase.prototype.replacePage = replacePage;

constructor(private navCtrl: NavController)
foo(){
    this.navCtrl.replacePage(HomePage, {nextPage: OtherPage});
}