Angular 16 如何创建无初始值的Signal？

Signal的设计要求必须提供初始值，这和传统类变量未初始化的写法不同。针对你的需求，有以下几种无需使用any类型的解决方案：

1. 用undefined作为初始值，结合可选类型定义 #

可以将Signal的类型设为Filter[] | undefined，初始值传undefined，之后通过类型守卫或默认值处理空值情况：

filters = signal<Filter[] | undefined>(undefined);

• 在组件逻辑中使用时，可通过空值合并运算符提供默认值：

  const currentFilters = this.filters() ?? [];
  

• 在模板中，可通过*ngIf先判断值是否存在，避免空值报错：

  <div *ngIf="filters() as currentFilters">
    <!-- 使用currentFilters -->
  </div>
  

• 若能确保使用前已赋值，也可使用非空断言this.filters()!，但需谨慎使用，避免运行时空值问题。

2. 使用required()创建延迟初始化的Signal（Angular 16+） #

Angular 16新增了required()函数，可创建一个必须在使用前赋值的非空Signal，完美适配你需要延迟初始化的场景：

import { required } from '@angular/core';

filters = required<Filter[]>();

之后在合适的时机（比如ngOnInit、数据请求完成后）赋值：

this.filters.set(loadedFilters);

如果未赋值就尝试读取该Signal，会抛出明确的运行时错误，帮助你排查初始化问题，同时类型层面始终保持非空，无需处理空值判断。

3. 封装安全访问的 getter #

针对可空Signal，可在组件中封装一个getter方法，统一处理空值逻辑：

filters = signal<Filter[] | null>(null);

get safeFilters(): Filter[] {
  return this.filters() ?? [];
}

之后在组件逻辑和模板中直接使用safeFilters，无需再处理空值报错。

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