vue-cli搭建Vue3模板用TS箭头函数跨环境编译失败排查

Vue SFC模板内联表达式默认仅支持原生JavaScript语法，原生不支持TypeScript类型标注，同代码不同环境编译结果不一致的核心原因是依赖版本不匹配：

• 本地环境大概率安装了3.3及以上版本的@vue/compiler-sfc，Vue 3.3版本开始实验性支持模板内联TS语法，无需额外配置即可识别参数类型标注；同事本地安装的是3.3以下版本的编译器，无法识别TS语法直接抛出编译错误。
• 不存在独立的配置项可手动开启低版本Vue的模板TS语法支持，该能力是3.3+版本编译器内置的实验特性。
• 解决方式：对比两端vue、@vue/compiler-sfc、@vue/cli-plugin-typescript的版本号，统一依赖版本后删除node_modules和依赖锁文件重新安装即可消除编译差异。

“模板内不能使用箭头函数”是错误认知，合理使用内联箭头函数不会造成额外性能问题，v-for循环下同时接收事件抛值和循环索引的场景，可通过以下三种方案解决：

方案1：移除模板内手动类型标注（优先推荐） #

模板内表达式的参数类型可通过组件的emits定义自动推导，无需手动标注类型即可获得完整的类型校验：

<template>
  <my-com
    v-for="(item, index) in list"
    :key="item.id"
    @change="(value) => myFunction(value, index)"
  />
</template>

<script lang="ts" setup>
// 只要my-com组件正确声明了change事件的payload类型，模板中value会自动推导为string类型
const myFunction = (value: string, index: number) => {
  // 业务逻辑实现
}
</script>

如果出现类型推导失效，优先检查自定义组件的emits选项是否正确声明了change事件的参数类型，不要在模板内手动编写类型标注。

方案2：高阶函数封装（零类型报错） #

如果不希望在模板内编写箭头函数，可在script块中封装高阶函数接收循环索引，返回对应的事件处理函数：

<template>
  <my-com
    v-for="(item, index) in list"
    :key="item.id"
    @change="createChangeHandler(index)"
  />
</template>

<script lang="ts" setup>
const myFunction = (value: string, index: number) => {
  // 业务逻辑实现
}

const createChangeHandler = (index: number) => {
  return (value: string) => {
    myFunction(value, index)
  }
}
</script>

该写法将所有类型逻辑收敛在script块中，完全规避模板内TS语法兼容问题，不会触发任何类型报错。

方案3：升级依赖版本适配模板TS语法 #

如果业务确实需要在模板内编写TS类型标注，直接将项目内vue、@vue/compiler-sfc、Vue CLI相关TypeScript插件升级至3.3及以上稳定版本，重新安装依赖后即可正常编译模板内的TS语法。

最佳实践：不推荐在模板表达式中编写TS类型标注，模板应保持逻辑简洁，类型定义、逻辑处理尽量收敛在script块中，降低后续维护和重构成本。

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