angular - Adding method to RxJs 6 Subscription prototype

Question

Using rxjs@5, we implemented a convenient DisposeBag class to gather Subscriptions and make it easier to unsubscribe when destroying an Angular component.

import { Subscription } from "rxjs/Subscription";

export class DisposeBag {
    private _subscription: Subscription[] = [];

    insert(subscription: Subscription): void {
        this._subscription.push(subscription);
    }

    dispose() {
        this._subscription.forEach(subscription => {
            subscription.unsubscribe();
        });
        this._subscription = [];
    }
}

export function disposedBy(this: Subscription, bag: DisposeBag): void {
    bag.insert(this);
}

Subscription.prototype.disposedBy = disposedBy;

declare module "rxjs/Subscription" {
    interface Subscription {
        disposedBy: typeof disposedBy;
    }
}

Upgrading to rxjs@6 + rxjs-compat@6, we get the following compile errors:

(12) Property 'unsubscribe' does not exist on type 'Subscription'. (22) 'Subscription' only refers to a type, but is being used as a value here.

Switching the 1st import to

import { Subscription } from "rxjs";

solves both errors but introduces a (22) Property 'disposedBy' does not exist on type 'Subscription'. error.

How can we fix this?

标签： angularrxjsrxjs6

Answer 1

感谢这个答案，我能够像这样修复它：

import { Subscription } from "rxjs";

export class DisposeBag {
    private _subscription: Subscription[] = [];

    insert(subscription: Subscription): void {
        this._subscription.push(subscription);
    }

    dispose() {
        this._subscription.forEach(subscription => {
            subscription.unsubscribe();
        });
        this._subscription = [];
    }
}

export function disposedBy(this: Subscription, bag: DisposeBag): void {
    bag.insert(this);
}

Subscription.prototype.disposedBy = disposedBy;

declare module "rxjs/internal/Subscription" {
    interface Subscription {
        disposedBy: typeof disposedBy;
    }
}