Vue 3调用defineEmits后defineProps类型失效如何解决？

你遇到的是旧版本工具链的兼容问题：

• 你当前使用的TypeScript 4.4对Vue 3 <script setup> 的泛型推导支持不完善，Vue 3.2.30及以上版本官方要求最低TS版本为4.7+
• 旧版Volar（Vue官方VS Code插件）在同时解析带内联泛型的defineEmits和defineProps时，会偶发类型识别失效的问题

方案1：升级工具链（最推荐） #

直接升级相关依赖到兼容版本即可完全修复，不需要修改业务代码：

• TypeScript 升级到 4.7 及以上版本
• Vue 升级到 3.2.45 及以上版本
• VS Code 中的 Volar 插件升级到最新正式版

方案2：保留TS 4.4时的兼容写法 #

如果必须使用当前TS版本，将Props和Emits的类型提取为单独的interface定义即可解决识别问题：

<script setup lang="ts">
import { defineProps, defineEmits, VueElement } from "vue";

interface Props {
  label?: VueElement | string;
  checked?: boolean;
}

interface Emits {
  (e: "update:checked", value: boolean): void
}

const emit = defineEmits<Emits>();
const props = defineProps<Props>();
</script>

<template>
  <label>
    <input
      type="checkbox"
      :checked="checked"
      @change="(event) => emit('update:checked', (event.target as HTMLInputElement).checked)"
    />
    {{ label }}
  </label>
</template>

注意：<script setup> 中定义的props在模板内可以直接使用属性名，不需要加props.前缀，这是Vue原生支持的语法，也能进一步避免插件识别异常

方案3：运行时定义+类型断言兜底 #

如果上述写法仍然报错，可以改用运行时声明配合类型断言的写法，兼容性最高：

const props = defineProps({
  label: [String, Object as () => VueElement],
  checked: Boolean
}) as {
  label?: VueElement | string;
  checked?: boolean;
};

const emit = defineEmits(['update:checked']) as (e: 'update:checked', value: boolean) => void;

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