【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",
  },
};