zoukankan      html  css  js  c++  java
  • 【Bug记录】defineEmits 在 TS 项目报错

    前言

    单文件组件 <script setup> 是 Vue3.2 版本后非常流行的写法。
    但是在开发过程中,按照官网使用 defineEmits ,结果项目报错,无法运行。

    错误截图

    Unexpected newline between function name and paren func-call-spacing
    错误翻译:函数名与括号function -call-spacing之间的意外换行符

    vscode 错误

    image

    浏览器错误

    image

    官网使用截图

    image
    image

    原因归因

    • 项目使用了 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 对当前规则检查(推荐)

    • 打开项目根目录下的 .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",
      },
    };
    
    
  • 相关阅读:
    最大化等比例测试演化Demo-传统方法
    Layout-3相关代码:3列布局代码演化三]
    Layout-3相关代码:3列布局代码演化[二]
    Layout-2相关代码:3列布局代码演化[一]
    Layout-1相关代码
    【比赛打分展示双屏管理系统-专业版】Other.ini 配置文件解读以及排行榜界面及专家评语提交展示等具体配置
    Android 开源简单控件
    Android Drawable资源
    Android Service与Thread的区别
    Android事件处理
  • 原文地址:https://www.cnblogs.com/Megasu/p/15799783.html
Copyright © 2011-2022 走看看