【Bug记录】defineEmits 在 TS 项目报错

前言

单文件组件 <script setup> 是 Vue3.2 版本后非常流行的写法。

但是在开发过程中，按照官网使用 defineEmits ，结果项目报错，无法运行。

错误截图

Unexpected newline between function name and paren func-call-spacing

错误翻译：函数名与括号function -call-spacing之间的意外换行符

vscode 错误

浏览器错误

官网使用截图

明明完全按官方文档方式使用，居然报错了，踩到大坑。

原因归因

• 项目使用了 EsLint
• defineEmits 代码换行了

解决方案（提供三种）

报错代码

• 按照官网提示，结果代码运行报错

import { defineEmits } from 'vue-demi'

// Unexpected newline between function name and paren.(eslintfunc-call-spacing)
const emit = defineEmits<{
  (event: 'change'): void
  (event: 'update', id: number): void
}>()

方案1：代码不换行

• 定义 defineEmits 注解的时候不换行。

import { defineEmits } from 'vue-demi'

// 注意添加分号 ;
const emit = defineEmits<{(event: 'change'): void; (event: 'update', id: number): void }>()

方案2. 抽离类型注解

• 把类型注解抽离出来再引用。

import { defineEmits } from 'vue-demi'

// 抽离类型注解
type Emit = {
  (event: 'change'): void
  (event: 'update', id: number): void
}
const emit = defineEmits<Emit>()

方案3：屏蔽 eslint 对当前规则检查（推荐）

• 自己修改 Eslint 规则，打开项目根目录下的 .eslintrc.js 文件，添加规则屏蔽：

这种写法不需要修改源码

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "@vue/standard",
    "@vue/typescript/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
+    // 屏蔽错误
+    // "func-call-spacing": "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};