Angular11 表单传参报string无法赋值给number类型参数问题

报错说明 #

运行代码时触发TS类型校验错误：

Argument of type 'string' is not assignable to parameter of type 'number'.
报错位置在按钮点击事件调用addProduct(name.value, price.value, isactive.checked)处，指向price.value参数的类型不匹配。

问题根源 #

• 原生DOM中，所有<input>元素的value属性固定返回字符串类型，和input设置的type="number"无关联，不存在自动转数字的隐式逻辑。
• 组件内定义的addProduct方法要求第二个入参是number类型，直接把字符串类型的price.value传入，自然会触发类型校验报错。
• 之前Angular 9版本能正常运行，本质是当时的模板静态类型检查规则更宽松，没有对模板表达式内的参数匹配关系做严格校验；Angular 11版本逐步收紧了模板的严格类型检查规则，才把这个本来就存在的类型不匹配问题暴露出来，并非之前的写法本身完全合规。

修复方案 #

• 最小改动方案：在模板传参时手动完成类型转换，将字符串格式的输入值转为数字即可，修改按钮点击的事件逻辑为：

  <button
    class="btn btn-primary"
    (click)="
      addProduct(name.value, Number(price.value), isactive.checked);
      name.value = '';
      price.value = '';
      isactive.checked = false
    "
  >
  

  实际业务中建议补充输入值校验，避免用户输入无法转成数字的内容，导致传入NaN值影响后续逻辑。
• 输入体验优化：可将价格输入框的type属性从text调整为number，借助浏览器原生能力限制用户仅输入数字格式内容；需要特别注意，即使将input的type设为number，通过元素引用拿到的value依然是字符串类型，必须搭配显式的类型转换逻辑，不能误以为改了type就不需要做类型转换。
• 工程化优化：不建议在模板的内联事件表达式中堆叠取数、类型转换、表单重置、业务调用这类多步逻辑，可将整套流程迁移到组件的TS方法中实现：模板仅负责绑定点击事件到组件方法，将input的引用作为参数传入，在TS方法内完成取值、类型转换、合法性校验、表单重置、业务方法调用的全流程，大幅提升代码可维护性。

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