如何修复Vue2模板中TypeScript隐式any类型错误（非全局忽略）

问题根源 #

Vue2的模板编译器不支持在模板内的箭头函数中添加TypeScript类型注解，直接写类型会导致编译失败；同时模板中的//@ts-ignore注释无法被TS编译器识别，因此不能通过这种方式忽略错误。

可行解决方法 #

方法1：在script中定义带类型的处理函数，模板直接绑定 #

将参数类型注解移到组件的script部分，利用闭包捕获props，避免在模板中写箭头函数：

// 先定义props的类型
interface CrewProps {
  // 根据你的实际props结构定义字段，例如：
  id: number;
  name: string;
}

export default Vue.extend({
  props: {
    id: Number,
    name: String
  } as VuePropsDefinition<CrewProps>,
  methods: {
    // 定义带类型的事件处理函数
    handleCrewChange(newValue: string) {
      this.crewEntryUpdated(newValue, this.$props as CrewProps);
    },
    crewEntryUpdated(newValue: string, props: CrewProps) {
      // 你的原有业务逻辑
    }
  }
})

模板中直接绑定该方法：

<MiniTextField @change="handleCrewChange" />

方法2：给MiniTextField组件的change事件添加类型声明 #

通过给子组件的change事件添加类型约束，让TS自动推导父组件模板中事件参数的类型：

在MiniTextField.vue的script中声明事件类型：

export default Vue.extend({
  // 声明change事件的参数类型
  emits: {
    change: (value: string) => typeof value === 'string'
  },
  // 组件其他逻辑...
})

这样父组件模板中的箭头函数参数newValue会自动获得对应类型，不会触发TS7006错误。

方法3：用computed生成绑定props的带类型处理函数 #

通过computed属性创建一个已绑定props的箭头函数，提前给参数加上类型：

interface CrewProps {
  // 你的props结构
}

export default Vue.extend({
  props: { /* props定义 */ } as VuePropsDefinition<CrewProps>,
  computed: {
    crewChangeHandler() {
      // 提前给newValue添加类型注解
      return (newValue: string) => {
        this.crewEntryUpdated(newValue, this.$props);
      };
    }
  },
  methods: {
    crewEntryUpdated(newValue: string, props: CrewProps) {
      // 业务逻辑
    }
  }
})

模板中绑定该computed属性：

<MiniTextField @change="crewChangeHandler" />

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