Angular 14 中的类型化表单显示“<any>”而不是类型

Question

在使用最新版本的 Angular（版本 14）时，我似乎没有做得很好，因此严格类型化的反应式表单无法按预期工作。

表单是ngOnInit使用injected在内部初始化的FormBuilder。

 public form!: FormGroup;

 constructor(private formBuilder: FormBuilder) {}

 ngOnInit(): void {
    this.initializeForm();
  }

  private initializeForm(): void {
    this.form = this.formBuilder.group({
      title: ['', [Validators.required, Validators.minLength(3)]],
      content: ['', Validators.required],
    });
  }

现在，当我尝试访问表单的控件时，没有自动完成功能，类型为FormGroup<any>。此外，当尝试访问对象上不存在的控件时，它不会引发错误FormGroup。

• 例子：

• package.json

• 角度官方文档：

https://angular.io/guide/typed-forms

Answer 1

TL;DR：TypeScript 识别其“类型”的方式主要是由于接口和上下文。我解决该问题的建议是显式创建一个接口并将其传递给表单，因为它无法推断。

\n\n

在多数情况下; 只要在声明中使用正确的类型进行初始化，Angular 就会推断出表单类型。这个答案承认了这个特定的用例。

\n

请注意推断类型，推断类型需要更多的重构工作。此外，只需查看其声明，您就可以使用接口轻松识别对象和属性类型，而后者无法使用推断类型来完成。我的建议是始终优先选择接口而不是推断类型，当然这个注释来自我自己的经验。

\n\n

您的用例：

\n

在您提供的示例中，无法推断类型form，您必须明确告知。我已经制作了这个打字表单的工作示例。官方文档为您提供了大部分答案。

\n

要删除<any>您在自动完成中看到的内容，只需实现您自己的接口：

\n

export interface IMainForm {\n    title: FormControl<string>;\n    content: FormControl<string>;\n}\n

\n

public form!: FormGroup<IMainForm>; // <--- Use your interface\n

\n

此外，您的实现this.formBuilder.group 已被弃用，因为它不是类型安全的。您需要使用重载 withAbstractControlOptions来代替（而不是数组重载）。

\n

private initializeForm(): void {\n  this.form = this.formBuilder.group({\n    title: new FormControl<string|null>(null, [Validators.required, Validators.minLength(3)]),\n    content: new FormControl<string|null>(null, Validators.required)\n  });\n}\n

\n

如下图所示，进行这些更改后，您将看到键入的值{Partial<{ title: string; content: string; }>}。\n

\n\n

您可以在 typescriptlang 中查看类型推断的工作原理，了解更多详细信息，这里\xc2\xb4s 是一个小摘录：

\n

简单类型let x = 4是number

\n

\n

x 变量的类型被推断为数字。当初始化变量和成员、设置参数默认值以及确定函数返回类型时，会发生这种推理。

\n

\n

最常见的类型let x = [0, 1, null]是类型(number | null)[]

\n

\n

要推断上例中 x 的类型，我们必须考虑每个数组元素的类型。这里我们为数组类型提供了两种选择：number 和 null。最佳通用类型算法会考虑每个候选类型，并选择与所有其他候选类型兼容的类型。

\n

\n

语境window.onmousedown = function (mouseEvent) { ... }类型MouseEvent

\n

\n

上下文类型适用于许多情况。常见情况包括函数调用的参数、赋值的右侧、类型断言、对象和数组文字的成员以及返回语句。上下文类型还充当最佳\n通用类型中的候选类型。

\n

\n