老师,useMousePosition可以运行但是会报一个warning

来源:3-12 vue3 模块化妙用- 鼠标追踪器

慕莱坞4464187

2021-05-16

老师,useMousePosition可以运行但是会报一个warning:
项目地址/src/views/hooks/useMousePosition.ts
warning Missing return type on function, 请问下这边 type要怎么处理呢


// x: Ref<number> y: Ref<number>
// Ref<number> 要怎么处理呢
// 或是这个 function useMousePosition() {  
const useMousePosition = () => {
    const x = ref(0)
    const y = ref(0)
    const updateMouse = (e: MouseEvent) => {
        x.value = e.pageX
        y.value = e.pageY
    }
    onMounted(() => {
        document.addEventListener('click', updateMouse)
    })
    onUnmounted(() => {
        document.removeEventListener('click', updateMouse)
    })
    return {x , y}
}

export default useMousePosition

老师我前阵子项目忙,现在回来学习了,.eslintrc如下:
.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

不过项目里有用到Typescript,发现这样写就不会报错了,但不知道是和eslint哪边有关,用的@vue/cli 4.5.13

import {ref, onMounted, onUnmounted, Ref} from 'vue'

interface Position {
    x: Ref<number>
    y: Ref<number>
}
const useMousePosition = (): Position=> {
// ....
}
写回答

2回答

张轩

2021-07-10

同学你好 这个规则是是新版 typescript/eslint 

"@typescript-eslint/eslint-plugin": "^4.18.0",

添加的规则,这条规则的详情是:

@typescript-eslint/explicit-module-boundary-types
文档在这里:https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/explicit-module-boundary-types.md

如果想取消这条规则,可以在eslint 的配置文件中 .eslintrc.js,rules中添加

'@typescript-eslint/explicit-module-boundary-types': 'off'
这样就没有这个警告了


0
1
慕莱坞4464187
非常感谢老師!
2021-07-10
共1条回复

张轩

2021-05-17

同学你好 请提供你的eslintrc文件的内容给我看下好吗? 一般使用vue cli创建的项目是没有这条规则的

0
5
慕莱坞4464187
回复
张轩
老师,我把问题编辑了下,还请您有空回答,谢谢!
2021-07-10
共5条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程