函数 useAppDispatch 缺少 return 类型

Question

.eslintrc.js

module.exports = {
  root: true,
  extends: [
    '@react-native-community',
    'standard-with-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',

    'plugin:import/recommended',

    'plugin:import/typescript',
  ],
  plugins: ['@typescript-eslint', 'prettier'],
  parser: '@typescript-eslint/parser',
  ignorePatterns: [
    'index.js',
    'metro.config.js',
    'react-native.config.js',
    'reactotron.config.js',
    'babel.config.js',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
  },
  rules: {
    'prefer-const': 2,
    'no-var': 2,
    'no-new-object': 2,
    'object-shorthand': 2,
    'no-useless-rename': 2,
    'no-prototype-builtins': 2,
    'no-array-constructor': 2,
    'dot-notation': 0,
    semi: 0,
    'padding-line-between-statements': [
      'error',
      { blankLine: 'always', prev: '*', next: 'return' },
      { blankLine: 'always', prev: '*', next: 'break' },
      { blankLine: 'always', prev: '*', next: 'continue' },
      { blankLine: 'always', prev: '*', next: 'function' },
      { blankLine: 'always', prev: '*', next: 'block' },
    ],
    'lines-around-comment': [
      2,
      {
        beforeLineComment: true,
        allowBlockStart: true,
        allowObjectStart: true,
        allowObjectEnd: true,
      },
    ],
    'no-console': 1,
    'no-param-reassign': [
      'error',
      { props: true, ignorePropertyModificationsFor: ['state'] },
    ],

    // @react-native-community config is outdated as we have upgraded typescript
    // ^^ due to the above, all enums started throwing warning
    'no-shadow': 'off',

    // Import rules
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
          'object',
          'type',
        ],
        alphabetize: {
          order: 'asc',
        },
        'newlines-between': 'always',
      },
    ],
    'import/no-named-as-default-member': 'off',

    // typescript rules
    '@typescript-eslint/no-shadow': ['error'],
    '@typescript-eslint/strict-boolean-expressions': 'off',
    '@typescript-eslint/explicit-function-return-type': [
      'error',
      {
        allowExpressions: true,
        allowTypedFunctionExpressions: true,
      },
    ],
    '@typescript-eslint/naming-convention': [
      'error',
      {
        selector: 'property',
        format: ['snake_case', 'strictCamelCase', 'UPPER_CASE'],
      },
    ],
  },
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
      },
    },
  },
};

Store.ts

import { configureStore } from '@reduxjs/toolkit';

import usersReducer from '../features/users';

const store = configureStore({
  reducer: {
    users: usersReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

export default store;

使用Store.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';

import { RootState, AppDispatch } from '../store/index';


export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

() => useDispatch<AppDispatch>() 希望我提供 return 类型，因为 @typescript-eslint/explicit-function-return-type 已启用。通过将鼠标悬停在 VSCode 中的常量 useAppDispatch 上可以看到 return 类型，但它需要经常更新，因为它列出了商店状态。

如何使函数避免询问 return 类型，因为它已经在不禁用规则的情况下推断出来了？谢谢。

包：

"react-redux": "^7.2.6",
"@types/react-redux": "^7.1.22",
"typescript": "^4.5.4",

Answer 1

禁用该规则，至少在这一行中。就是这样。

说真的，这个规则是有害的。您不需要激活每个现有的 eslint 规则，强制使用某些类型进行注释的规则特别有害，会导致您删除可用的类型信息。

如果出现问题，您仍然会收到类型错误，只是在函数的使用处，而不是在定义处。

有一个地方需要注释类型，那就是在函数输入位置 - 因为在那里无法推断它们。其他一切都是可选的。有时它有助于提高可读性，有时它会阻碍它。到时候动动脑筋，不要墨守成规。

特别是使用 Redux Toolkit，你会得到很多非常具体的类型，手动注释这些类型将需要你在类型中复制你的代码，或者以你丢失有价值信息的方式注释它。

函数 useAppDispatch 缺少 return 类型

Missing return type on function useAppDispatch

javascript

typescript

reactjs

react-redux

redux-toolkit