Angular 10升级至14时遇TypeScript错误，求解决方案

错误原因分析 #

Angular 14+对表单的TypeScript类型推断做了严格强化，不再允许隐式的any类型推断，之前依赖any绕过类型检查的代码会触发明确的类型错误。下面针对每个错误给出具体修复方案：

分步修复 #

1. 定义表单结构的类型接口

先明确表单各字段的类型，让TypeScript能正确推断表单值的结构，解决前4个unknown类型错误：

// 单个unit项的表单结构
interface UnitForm {
  isChecked: boolean;
  value: string;
  totalCalculation: string;
  validFrom: string;
  validTo: string;
}

// 整个property详情表单的结构
interface PropertyDetailsForm {
  id: string;
  plot: FormGroup; // 若addDropDownFormGroup有特定返回类型，替换为对应类型（比如DropDownFormGroup）
  property: FormGroup;
  type: string;
  isAllChecked: boolean;
  validFrom: string;
  validTo: string;
  totalValue: string;
  totalConsumption: string;
  units: FormArray<FormGroup<UnitForm>>;
}

2. 明确表单的类型声明

创建表单时，用FormGroup<PropertyDetailsForm>指定类型，替代原来的隐式类型：

const form = this.fb.group<PropertyDetailsForm>({
  id: [''],
  plot: this._form.addDropDownFormGroup(),
  property: this._form.addDropDownFormGroup(),
  type: [''],
  isAllChecked: [false],
  validFrom: [''],
  validTo: [''],
  totalValue: [''],
  totalConsumption: [''],
  units: this.fb.array<FormGroup<UnitForm>>([])
});

3. 修正循环中的类型访问

此时form.get('units').value会自动推断为UnitForm[]，无需再用as any[]强制类型转换：

form.valueChanges.subscribe(() => {
  let total = 0;
  let consumptionTotal = 0;
  let minDate: Date | null = null;
  let maxDate: Date | null = null;

  // 直接访问units的value，类型已明确为UnitForm[]
  form.get('units')?.value.forEach(elem => {
    if (elem.isChecked) {
      // 简化NaN处理：parseFloat空字符串会返回NaN，用|| 0兜底
      total += parseFloat(elem.value) || 0;
      consumptionTotal += parseFloat(elem.totalCalculation) || 0;
    }

    if (elem.validFrom) {
      const elemDate = new Date(elem.validFrom);
      if (!minDate || elemDate < minDate) {
        minDate = elemDate;
      }
    }

    if (elem.validTo) {
      const elemDate = new Date(elem.validTo);
      if (!maxDate || elemDate > maxDate) {
        maxDate = elemDate;
      }
    }
  });

  // 解决number转string的错误：将计算结果转为字符串
  form.get('totalValue')?.setValue(total.toString(), { emitEvent: false });
  form.get('totalConsumption')?.setValue(consumptionTotal.toString(), { emitEvent: false });
  
  // 将Date转为字符串格式（根据业务需求调整格式，比如YYYY-MM-DD）
  form.get('validFrom')?.setValue(minDate ? minDate.toISOString().split('T')[0] : '', { emitEvent: false });
  form.get('validTo')?.setValue(maxDate ? maxDate.toISOString().split('T')[0] : '', { emitEvent: false });
});

4. 额外优化点

• 把minDate/maxDate的类型从any改为Date | null，更符合类型规范；
• 用elem.validFrom直接判断空值（替代this._serv.checkForNull，如果该方法只是判断空字符串/undefined的话），简化逻辑；
• 日期格式用split('T')[0]截取日期部分，避免带时间的ISO字符串，可根据业务需求调整为其他格式。

完整修复后的代码 #

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

// 定义表单类型接口
interface UnitForm {
  isChecked: boolean;
  value: string;
  totalCalculation: string;
  validFrom: string;
  validTo: string;
}

interface PropertyDetailsForm {
  id: string;
  plot: FormGroup;
  property: FormGroup;
  type: string;
  isAllChecked: boolean;
  validFrom: string;
  validTo: string;
  totalValue: string;
  totalConsumption: string;
  units: FormArray<FormGroup<UnitForm>>;
}

// 组件内的方法
addPropertyDetails() {
  const form = this.fb.group<PropertyDetailsForm>({
    id: [''],
    plot: this._form.addDropDownFormGroup(),
    property: this._form.addDropDownFormGroup(),
    type: [''],
    isAllChecked: [false],
    validFrom: [''],
    validTo: [''],
    totalValue: [''],
    totalConsumption: [''],
    units: this.fb.array<FormGroup<UnitForm>>([])
  });

  form.valueChanges.subscribe(() => {
    let total = 0;
    let consumptionTotal = 0;
    let minDate: Date | null = null;
    let maxDate: Date | null = null;

    form.get('units')?.value.forEach(elem => {
      if (elem.isChecked) {
        total += parseFloat(elem.value) || 0;
        consumptionTotal += parseFloat(elem.totalCalculation) || 0;
      }

      if (elem.validFrom) {
        const elemDate = new Date(elem.validFrom);
        if (!minDate || elemDate < minDate) {
          minDate = elemDate;
        }
      }

      if (elem.validTo) {
        const elemDate = new Date(elem.validTo);
        if (!maxDate || elemDate > maxDate) {
          maxDate = elemDate;
        }
      }
    });

    form.get('totalValue')?.setValue(total.toString(), { emitEvent: false });
    form.get('totalConsumption')?.setValue(consumptionTotal.toString(), { emitEvent: false });
    form.get('validFrom')?.setValue(minDate ? minDate.toISOString().split('T')[0] : '', { emitEvent: false });
    form.get('validTo')?.setValue(maxDate ? maxDate.toISOString().split('T')[0] : '', { emitEvent: false });
  });

  return form;
}

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