javascript - 被 Rxjs Observable 构造函数和 'this' 参数混淆

标签 javascript angular typescript rxjs

我正在 Angular 7.2 应用程序的 Jasmine 测试中测试 Rxjs 6.3.3 的使用。我正在尝试创建一个 Rxjs Observable,但遇到了我不理解的错误。

Rxjs Observable 构造器的函数签名是

constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic);

在 Jasmine 测试中,我试图实例化一个 Observable 实例,这需要我在构造函数签名中传递 lambda 的定义。以下语法:

const obs = new Observable<number>((this: Observable<number>, s: Subscriber<number>): TeardownLogic => {});

...失败

"error TS2730: An arrow function cannot have a 'this' parameter."

我不明白这一点,因为在构造函数的函数签名中,箭头函数定义是用“this”参数声明的,这不是问题。

第二种语法:

const obs = new Observable((o: Observable<{}>, s: Subscriber<{}>): TeardownLogic => {});

...失败

"error TS2345: Argument of type '(o: Observable<number>, s: Subscriber<number>) => TeardownLogic' is not assignable to parameter of type '(this: Observable<number>, subscriber: Subscriber<number>) => TeardownLogic'"

这让我感到困惑,因为错误消息中的两个函数签名对我来说似乎是相同的。

但有效的是像这样简单地完全省略第一个参数:

const obs = new Observable((s: Subscriber<{}>): TeardownLogic => {});

这让我感到困惑,因为现在这里定义的 lambda 看起来与构造函数签名中的 lambda 完全不同。

我知道在构造函数中使用“this”,在箭头函数中使用闭包和“this”的不同含义。但是当用作方法签名中的参数时,我不知道“this”有任何特殊含义。我用 Google 搜索并阅读了 MDN 中关于“this”的文档,但仍然一无所知。

在'subscribe?: (this: Observable, subscriber: Subscriber) => TeardownLogic' 中的 Observable 构造函数'this' 似乎有某种神奇的行为。任何人都可以向我解释它是什么以及我可以在哪里找到一些关于它的文档吗?

最佳答案

在函数定义中:

 (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic

这里的this是Typescript中的一种特殊语法。它指定函数期望的“this”的类型。所以在这里它只是意味着它应该被一个与订阅者具有相同类型 T 的 Observable 调用。

它在参数列表中排在第一位。它是一个假参数,应该在没有它的情况下调用。

所以你的代码有效:

new Observable((s: Subscriber<{}>): TeardownLogic => {});

我认为 Typescript 只是获取类型 {} 并将其提供给新的 Observable,因为您没有指定类型。所以现在它们属于同一类型。

可以找到更多信息 Here :

关于javascript - 被 Rxjs Observable 构造函数和 'this' 参数混淆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54886652/

相关文章:

javascript - 将参数传递给没有 Controller 的指令

c# - 连接到信号中心

提交搜索表单后的 Angular 重定向

unit-testing - Angular 2 : "TypeError: Cannot read property ' createAsync' of undefined"

typescript - 为什么 Typescript 不会因缺少参数而引发错误?

javascript - 如何使用该数组中对象的键对 typescript 数组进行分组?

javascript - 使用javaScript访问父div中的元素?

javascript - 在 init() 函数中调用 $timeout 时对 Controller 进行单元测试

javascript - 如何在页面加载后加载 Google Adsense? | Angular 6

javascript - 运行命令 ""时无效的 JSON 字符 : "ng update @angular/cli --migrate-only --from=1.7.4" at 0:0.