TypeScript非空校验后仍报错：number | null无法赋值给number

原因分析 #

你遇到的问题是TypeScript的类型守卫无法跨异步回调生效——虽然你在if (this.myVariable)里做了非空校验，但subscribe回调是异步执行的，TS无法保证回调执行时this.myVariable仍然是非空（比如可能被其他逻辑修改为null），所以依然会提示类型不匹配。

可行解决方案 #

1. 将变量赋值给局部常量 #

在if块内把this.myVariable赋值给一个局部常量，TS能跟踪这个常量的类型（局部常量不会被外部修改），回调里直接使用这个常量即可：

if (this.myVariable) {
  const myVar = this.myVariable; // 局部常量，类型被推断为number
  this.dialogService
      .openConfirmDialog('TITLE', 'CONTENT')
      .afterClosed()
      .pipe(take(1))
      .subscribe((userChoice: boolean) => {
        if(userChoice){
          this.restFacadeService
              .archiveBook(myVar) // 此处不再报错
              .subscribe(() => { 
                this.createCustomBook();
              })
        }
  });
} else { this.createCustomBook(); }

2. 使用非空断言操作符（!） #

如果你能确保异步回调执行时this.myVariable一定不会变为null（比如该变量只会在组件销毁时才被置空，且回调在组件销毁前一定会执行完成），可以用非空断言告诉TS跳过类型检查：

if (this.myVariable) {
  this.dialogService
      .openConfirmDialog('TITLE', 'CONTENT')
      .afterClosed()
      .pipe(take(1))
      .subscribe((userChoice: boolean) => {
        if(userChoice){
          this.restFacadeService
              .archiveBook(this.myVariable!) // 非空断言，强制标记为非null
              .subscribe(() => { 
                this.createCustomBook();
              })
        }
  });
} else { this.createCustomBook(); }

注意：非空断言是“信任开发者”的操作，如果运行时this.myVariable实际为null，会抛出运行时错误，需谨慎使用。

3. 用RxJS操作符传递变量（优化嵌套订阅） #

你当前的代码存在嵌套订阅的问题，推荐用RxJS操作符（比如switchMap）扁平化流，同时自然解决类型问题：

import { of } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';

// ...

if (this.myVariable) {
  const myVar = this.myVariable;
  this.dialogService
      .openConfirmDialog('TITLE', 'CONTENT')
      .afterClosed()
      .pipe(
        take(1),
        switchMap(userChoice => {
          if (userChoice) {
            return this.restFacadeService.archiveBook(myVar);
          }
          return of(null); // 不执行操作时返回空流
        })
      )
      .subscribe(() => {
        this.createCustomBook();
      });
} else {
  this.createCustomBook();
}

这种方式不仅解决了类型问题，还优化了RxJS流的结构，降低嵌套订阅带来的内存泄漏风险。

内容的提问来源于stack exchange，提问作者user23354807