使用Angular NonNullableFormBuilder时空数组被解析为never的原因与解决

为什么空数组会被解析为never类型？ #

这是TypeScript类型推断结合NonNullableFormBuilder特性导致的：

• 当仅传入空数组[]作为表单控件初始值时，TypeScript无法从空数组推断出元素的具体类型，会默认将该数组类型推断为never[]。
• NonNullableFormBuilder的类型系统会进一步处理这个推断结果，最终将控件类型收缩为never，导致后续传入SomeType[]类型的值时出现类型不兼容错误。

解决方法 #

方法1：给初始值添加类型断言 #

直接通过类型断言告知TypeScript空数组的元素类型：

public form = this.fb.group({
    item: [[] as SomeType[]],
});

方法2：给group方法指定泛型表单模型 #

先定义表单的类型模型，再通过泛型传递给group方法，明确每个控件的类型：

interface MyFormModel {
  item: SomeType[];
}

public form = this.fb.group<MyFormModel>({
    item: [[]],
});

方法3：显式使用control方法并指定类型 #

通过fb.control显式声明控件类型，避免类型推断的歧义：

public form = this.fb.group({
    item: this.fb.control<SomeType[]>([]),
});

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