我之前维护同技术栈的项目时，正好碰到过这两个一模一样的问题，分享下亲测有效的解决方法：

问题1：消除Vue 3弃用警告（COMPILER_V_ON_NATIVE） #

这个警告是因为Volar默认会以Vue 3的编译规则检查代码，但我们的项目基于Vue 2，解决思路有两个：

方法1：全局指定Vue版本给Volar #

在项目根目录的tsconfig.json（Nuxt项目也可以在nuxt.config.ts的typescript配置中添加）里，新增vueCompilerOptions明确指定target为Vue 2：

{
  "compilerOptions": {
    // 你的现有TS配置
  },
  "vueCompilerOptions": {
    "target": 2
  }
}

保存后重启VSCode，Volar就会按Vue 2的规则校验代码，.native修饰符的警告自然消失。

方法2：单独忽略该警告 #

如果不想全局修改编译规则，也可以在项目的VSCode设置里单独禁用这个警告。在.vscode/settings.json中添加：

{
  "volar.diagnostics": {
    "COMPILER_V_ON_NATIVE": "ignore"
  }
}

这种方式更灵活，适合只需要屏蔽特定警告的场景。

问题2：自定义事件处理的TypeScript类型错误 #

这个问题源于Vue 2 Composition API在自定义事件类型推断上的局限性，需要手动给事件添加类型声明，推荐两种方式：

方法1：在组件内部声明事件类型 #

如果你是<Modal>组件的开发者，可以在组件代码里用DefineComponent明确指定事件的参数类型：

<script setup lang="ts">
import { DefineComponent } from '@nuxtjs/composition-api'
import type { ModalConfirmation } from '@/types/modal'

export default DefineComponent({
  emits: {
    'modal-confirmation': (payload: ModalConfirmation) => {
      // 可添加参数合法性校验，返回true表示参数符合要求
      return typeof payload === 'object' && payload !== null
    }
  },
  // 组件其他逻辑...
})
</script>

这样外部使用该组件时，TypeScript就能正确推断@modal-confirmation事件的参数类型。

方法2：全局扩展组件事件类型 #

如果是使用第三方组件或者不想修改组件源码，可以在项目的类型声明文件（比如types/vue.d.ts）中全局扩展事件类型：

import type { ModalConfirmation } from '@/types/modal'

declare module '@vue/runtime-core' {
  interface ComponentCustomEvents {
    'modal-confirmation': [payload: ModalConfirmation]
  }
}

// 必须导出空对象，否则TS会忽略这个声明文件
export {}

添加后，整个项目中使用@modal-confirmation事件时，都会自动识别参数的正确类型，不会再出现类型不兼容的错误。

内容的提问来源于stack exchange，提问作者Théo Lavaux