如何避免误用Angular Signal引用而非Signal值？

ESLint插件方案 #

使用@angular-eslint的专门规则可以直接拦截这类误操作：

• 安装最新版@angular-eslint依赖：

npm install @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser --save-dev

• 在.eslintrc.json中启用针对TS代码的规则：

{
  "rules": {
    "@angular-eslint/no-signals-as-booleans": "error"
  }
}

这个规则会在你直接将Signal作为布尔值（比如if (conditionalSignal)）时抛出错误，强制你调用Signal获取值（conditionalSignal()）。

• 若要覆盖模板中的误引用，再添加模板规则：

{
  "rules": {
    "@angular-eslint/template/no-access-signals-directly": "error"
  }
}

TypeScript严格模式增强 #

开启TypeScript严格模式，让类型系统辅助检测：
在tsconfig.json中配置：

{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true
  }
}

开启后，TypeScript会提示Type 'Signal<boolean>' is not assignable to type 'boolean'的类型错误，在编译阶段就能发现误引用问题。

这些配置组合起来，能在重构旧组件时自动检测并阻止误使用Signal引用的情况，大幅减少手动失误。

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