如何为FormBuilder构建的表单控件添加严格类型校验？

你遇到的问题是因为FormGroup.get()方法默认返回AbstractControl<any>，导致类型校验失效。以下是几种无需冗余模板代码的解决方案：

1. 类型断言（快速临时方案） #

每次获取控件时，手动断言为对应类型的FormControl，TypeScript会立即校验值的类型：

// 错误示例：传入number会触发类型报错
(userForm.get('name') as FormControl<string>).setValue(200);

// 正确示例
(userForm.get('name') as FormControl<string>).setValue('张三');

2. 扩展FormGroup实现类型安全的get方法 #

通过模块扩展给FormGroup添加类型安全的get方法，一劳永逸解决所有表单的类型校验问题：

import { FormGroup, FormControl } from '@angular/forms';

// 扩展Angular Forms模块的类型定义
declare module '@angular/forms' {
  interface FormGroup<T> {
    get<K extends keyof T>(key: K): FormControl<T[K]> | null;
  }
}

之后直接使用userForm.get('name')时，TypeScript会自动推断控件类型，调用setValue时会严格校验传入值：

userForm.get('name')?.setValue(200); // 触发类型错误：number不能赋值给string类型
userForm.get('name')?.setValue('张三'); // 正常通过校验

3. 升级到Angular 14+（原生支持类型化表单） #

Angular 14及以上版本原生支持类型化表单，只要在tsconfig.json中开启strict: true的严格类型检查，FormGroup的get方法会自动根据泛型参数返回对应类型的控件，无需额外代码：

// Angular 14+ 下直接使用原代码，会自动触发类型校验
userForm.get('name')?.setValue(200); // 直接弹出类型错误提示

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