时间戳

首页 > 解决方案 > Angular6 typescript 扩展方法 Observable

typescript - Angular6 typescript 扩展方法 Observable

问题描述

我正在尝试在 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"
  ]
}

任何想法 ？

标签： typescriptangular6extension-methods

解决方案

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

export * from 'rxjs-compat/Observable';

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

解决方法是将您的扩充更改为 target rxjs/internal/Observable（Observable最初声明类的位置）而不是rxjs/Observable，以便您的界面正确地与原始类合并。

推荐阅读