如何让ESLint/TypeScript在if语句中推断Angular Signal的值？

我在使用可能为undefined的Signal值时，不知道怎么在检查值已定义后，告知代码检查器（linter）该值已存在。

示例代码 #

export class MyComponent {
  mySignal$: WritableSignal<{ msg: string } | undefined> = signal(undefined);

  constructor() {
    this.mySignal$.set({ msg: 'Hello there!' });

    effect(() => {
      if(this.mySignal$()) {
        console.log(this.mySignal$().msg) // Object is possibly 'undefined'.ts(2532)
        
        // 可行但感觉有更简便的方法
        // console.log((this.mySignal$() as { msg: string }).msg)
      }
    });
  }
}

已安装的相关依赖包 #

{
  "@angular-eslint/eslint-plugin": "16.0.3",
  "@angular-eslint/eslint-plugin-template": "16.0.3",
  "@angular-eslint/template-parser": "16.0.3",
  "@nx/eslint-plugin": "16.8.1",
  "@typescript-eslint/eslint-plugin": "5.60.1",
  "@typescript-eslint/parser": "5.60.1",
  "eslint": "8.46.0"
}

补充说明（编辑1）

之前简化示例时未展示完整场景，实际代码中有多个Signal需要检查：

export class MyComponent {
  msgSignal$: WritableSignal<{ msg: string } | undefined> = signal(undefined);
  resultSignal$: WritableSignal<string | undefined> = signal(undefined);

  constructor() {
    this.msgSignal$.set({ msg: 'Hello there!' });
    this.resultSignal$.set('General Kenobi');

    effect(() => {
      if(this.msgSignal$() && this.resultSignal$()) {
        this.msgSignal$().msg = this.resultSignal$() // Object is possibly 'undefined'.ts(2532)
    
        // 已尝试的修复方案
        // this.msgSignal$()!.msg = this.resultSignal$()!
      }
    });
  }
}

可行解决方案 #

1. 将Signal值存入变量（最推荐）

由于Signal每次调用xxx$()都会返回当前值，TypeScript无法追踪多次调用的结果是否一致。把值存入变量后，TypeScript能通过类型守卫识别变量的非空状态：

effect(() => {
  const msgVal = this.msgSignal$();
  const resultVal = this.resultSignal$();
  if(msgVal && resultVal) {
    msgVal.msg = resultVal; // 无类型错误
  }
});

2. 非空断言运算符!

直接用!告诉TypeScript该值一定不为undefined，但要确保运行时值确实存在，否则会抛出错误：

effect(() => {
  if(this.msgSignal$() && this.resultSignal$()) {
    this.msgSignal$()!.msg = this.resultSignal$()!;
  }
});

3. 类型断言（不推荐，不够严谨）

和最初尝试的方法类似，手动指定类型，但不如变量存储安全：

effect(() => {
  if(this.msgSignal$()) {
    console.log((this.mySignal$() as { msg: string }).msg);
  }
});

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