Angular6 打字稿扩展方法 Observable<T>

Question

我正在尝试对 Observable 做一个扩展方法

import { Observable } from 'rxjs/Observable';

declare module 'rxjs/Observable' {
  interface Observable<T> {
    customFilter<T>(this: Observable<T>): Observable<T>;
  }
}

function customFilter<T>(this: Observable<T>) {
  return this;
}

Observable.prototype.customFilter = customFilter;

但是我总是遇到编译错误

ERROR in src/app/utils/observable.extensions.ts(13,1): error TS2693: 'Observable' only refers to a type, but is being used as a value here.

这是我的 tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es6",
    "types": [],
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

有什么想法吗？

Answer 1

这是一个微妙的问题。 rxjs/Observable 模块包含：

export * from 'rxjs-compat/Observable';

您对名为 Observable 的导出接口的扩充阻止了 export * 语句从 rxjs-compat/Observable 重新导出 Observable，就好像 export interface Observable<T> { ... }直接写在 rxjs/Observable 模块中。（也许编译器应该在发生这种情况时报告错误。曾有 an issue 公开过这个问题，但在没有明确说明为什么无法报告错误的情况下就关闭了。）因此，从 rxjs/Observable 导出的 Observable 的唯一定义是您扩充中的接口；没有可用的值含义。

解决方法是将扩充更改为目标 rxjs/internal/Observable（最初声明 Observable class）而不是 rxjs/Observable，以便您的界面正确合并与原来的class.

Angular6 打字稿扩展方法 Observable<T>

Angular6 typescript extension method Observable<T>

extension-methods

typescript

angular6