类型“无效”不可分配给类型“订阅”

Question

在将我的项目从 Angular 11 升级到 12、将 rxjs 从 6.6.6 升级到 7.1.0 并将 Typescript 从 3.9.7 升级到 4.0.2 之后，我收到以下与我的计时器订阅相关的错误：

material-input.component.ts:1262:7 - 错误 TS2322：类型 'void' 不可分配给类型 'Subscription'。 第1262章

计时器位于下面的 onBlur 处理程序中：

onBlurTimerSubscription: Subscription;
// Below works to resolve the error. Is it ok?
// onBlurTimerSubscription: Subscription | any; 

onBlur(event: any) {
  this.allowOnChangeEvent = true;
  this.cleanupUnmatchedError();
  this.allowApiCalls = false;
  this.hasFocus = false;
  if (this.autoCompleteDisabled) {
    this.onBlurComplete(event);
  } else {
    /**
     * NOTE - Need to prioritize the `optionSelected` event over blur.
     *        Since the `onChange` event is debounced, if blur fires first
     *        theres a chance it won't execute properly.
     */
    const ALLOW_PRIORITY_OPTION_SELECTED_DELAY = 10 + this.debounceCustomEventDelay;
    this.onBlurTimerSubscription = timer(ALLOW_PRIORITY_OPTION_SELECTED_DELAY).subscribe(() => {
      this.onBlurComplete(event);
    }).add(() => {
      safeUnsubscribe(this.onBlurTimerSubscription);
    });
  }
}

在上述更新之前，此代码可以正常工作。 我需要采取哪些步骤来重构错误？

Answer 1

您可以通过不同的方式解决此问题：

创建Subscription类型的private类属性，存储订阅并在ngOnDestroy生命周期挂钩中取消订阅：

...
export class Component implements OnDestroy {
  private mySub = new Subscription();

  inSomeFunction() {
    // like this or
    this.mySub = timer(ALLOW_PRIORITY_OPTION_SELECTED_DELAY)
     .subscribe(() => this.onBlurComplete(event))

    // like this
    // this works better if you want to handle multiple
    // subscriptions, you just add them
    this.mySub.add(
      timer(ALLOW_PRIORITY_OPTION_SELECTED_DELAY)
       .subscribe(() => this.onBlurComplete(event))
    );
  }

  ngOnDestroy(): void {
    this.mySub?.unsubscribe(); // don't forget the ? operator
  }
}

或者您可以使用Subject管理订阅：

...
export class Component implements OnDestroy {
  private ngSubscription = new Subject();

  inSomeFunction() {
    timer(ALLOW_PRIORITY_OPTION_SELECTED_DELAY)
     .pipe(takeUnitl(this.ngSubscription))
     .subscribe(() => this.onBlurComplete(event))
  }

  ngOnDestroy(): void {
    this.ngSubscription.next();
    this.ngSubscription.complete();
  }
}