TypeScript module Augmentation

Question

I have extension for observable. It was working perfectly fine but now I've updated to angular 6 with typescript 2.7.2.

import { Observable } from 'rxjs/Observable';
import { BaseComponent } from './base-component';
import { Subscription } from 'rxjs/Subscription';
import { Subscribable } from 'rxjs';

declare module 'rxjs/Observable' {
    export interface Observable<T> {
        safeSubscribe<T>(this: Observable<T>, component: BaseComponent,
            next?: (value: T) => void, error?: (error: T) => void, complete?: () => void): Subscription;
    }
}


export function safeSubscribe<T>(this: Observable<T>, component: BaseComponent,
    next?: (value: T) => void, error?: (error: T) => void, complete?: () => void): Subscription {
    let sub = this.subscribe(next, error, complete);
    component.markForSafeDelete(sub);
    return sub;
}

Observable.prototype.safeSubscribe = safeSubscribe;

And this code is not working

1. 'Observable' only refers to a type, but is being used as a value here.
2. Property 'subscribe' does not exist on type 'Observable'.

https://www.typescriptlang.org/docs/handbook/declaration-merging.html

Answer 1

When merging declarations, the specified module path must exactly match the path to the actual module.

With RxJS version 6, you will need to change your module declaration, as the internal structure has changed. From memory, it should be:

declare module 'rxjs/internal/Observable' {
    export interface Observable<T> {
        safeSubscribe<T>(this: Observable<T>, component: BaseComponent,
            next?: (value: T) => void, error?: (error: T) => void, complete?: () => void): Subscription;
    }
}

For an example, see one of the patching imports in rxjs-compat.