无法将自定义运算符添加到Observable类

时间:2017-05-15 01:01:27

标签: javascript rxjs5

我正在编写一个自定义运算符来加载csv文件并将每一行作为数据发出。该运算符应该像of运算符一样工作,这是一个创建可观察对象的静态函数。我按照operator creation的指示,将运算符函数直接添加到Observable原型。

以下所有代码均以JavaScript ES6编写。

我的源代码是这个

import { Observable } from 'rxjs';
import { createInterface } from 'readline';
import { createReadStream } from 'fs';

function fromCSV(path, options) {

  return Observable.create((subscriber) => {
    let readStream = createReadStream(path);
    let reader = createInterface({ input: readStream });
    let isHeader = true;
    let columns;

    reader.on('line', (line) => {
      if (isHeader) {
        columns = line.split(',');
        isHeader = false;
      } else {
        let values = line.split(',');
        let valueObject = {};

        for (let i = 0, n = columns.length; i < n; i++) {
          valueObject[columns[i]] = values[i] || undefined;
        }

        subscriber.next(valueObject);
      }
    });

    reader.on('close', () => subscriber.complete());
    readStream.on('error', (error) => subscriber.error(error));
  });
}

Observable.prototype.fromCSV = fromCSV;

运算符函数看起来完全正确,但当我尝试使用此运算符时

import { Observable } from 'rxjs';
import './rx-from-csv';

Observable.fromCSV(testCSV)
  .subscribe((row) => {
    console.log(row);
  });

它会抛出错误TypeError: _rxjs.Observable.fromCSV is not a function。所以函数绑定失败了,我不知道它为什么会发生:-(任何帮助都表示赞赏。

这让我特别困惑,因为我已成功为another custom csv operator完成了类似的运算符绑定。

2 个答案:

答案 0 :(得分:0)

问题是TypeScript不了解运营商,因为它无法在RxJS的*.d.ts中找到它。

了解默认RxJS运营商的工作方式:https://github.com/ReactiveX/rxjs/blob/master/src/add/operator/bufferCount.ts

在您的情况下,您只需要具有Observable定义的正确路径的declare module ...部分。例如:

function fromCSV(path, options) {
  ...
}

Observable.prototype.fromCSV = fromCSV;

declare module 'rxjs/Observable' {
  interface Observable<T> {
    fromCSV: typeof fromCSV;
  }
}

答案 1 :(得分:0)

事实证明我使用了错误的方法来添加静态函数。有关详细信息,请参阅this post

要向Observable类添加静态函数,代码必须为

Observable.fromCSV = fromCSV;

将该函数添加到类的原型中将使其仅在新类之后可用。