Typescriptでは、ライブラリのクラスの拡張メソッドを作成します

Question

ライブラリから来た既存のクラスにいくつかのメソッドを追加したいと思います。

はinterface経由String、Element缶延長のようないくつかの基本的なタイプが知られているし、それがprototypeです追加します。

interface String { 
extFunc():Function; 
} 

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

"a".extFunc(); 

また、拡張方法を追加する方法は、Observable<T>です。

declare module 'rxjs/Observable' { 
    interface Observable<T> { 
    foo: String; 
    } 
} 
Observable.prototype.foo= "bar"; 
console.log(Observable.of("a").foo); 

しかし、私はからNavController（イオンからLIB）に同じことをしようとするとき、それは私が宣言インターフェイスに全体からNavControllerを上書きします。

declare module 'ionic-angular' { 
    interface NavController { 
    replace(page: Page): Promise<any>; 
    } 
} 
navCtrl.replace(...); //ok 
navCtrl.push(...); //original function => "not exist" 

これらのクラスにどのように拡張メソッドを追加するのがよいのでしょうか？感謝〜

編集： あり、実際のコードは

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

import {GuidePage} from '../guide/guide.component'; 

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

    // navCtrl is come from angular2's Dependency Injection, 
    // it may not suitable to extend NavController 
    constructor(public navCtrl: NavController) {} 

    gotoGuide(): void { 
    //wanna replace this 
    this.navCtrl.push(GuidePage).then(() => { 
     let index = this.navCtrl.getActive().index; 
     this.navCtrl.remove(index - 1); 
    }); 

    //with this custom extension method 
    //this.navCtrl.replace(GuidePage); 
    } 
} 

Answer 1

オクラホマの手順に従って、角度DIのプロバイダとして、独自の新しいの注射を登録する必要があり、私はthis answerに参照し、次のコードで私の質問を解決します。

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; 

polyfill.tsで使用：他のクラスに拡張メソッドを追加する

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

この方法で、これは後に誰かを助けたいです。

Answer 2

あなたの質問は、クラスを拡張する方法ですが、あなたのコードは、インタフェースを示しています。ライブラリからクラスを拡張する方法

：

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(){ 
    } 
} 

今、あなたはすべてのライブラリのメソッドと独自のメソッドを持っていますMyThingインスタンスを作成することができます

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ですで作業するときは、プロトタイプを必要としないとのことを補完することができます。

EDIT

これが動作するかどうか、私は試していないが、その代わりに、コンストラクタでから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 { 
} 

は、私がテストしていません！

またyour link