函数 useAppDispatch 缺少返回类型

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;

useStore.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>() 期望我在启用@typescript-eslint/explicit-function-return-type 时提供返回类型。将鼠标悬停在 VSCode 中的常量 useAppDispatch 上可以看到返回类型，但它需要经常更新，因为它会列出商店状态。

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

包：

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

Answer 1

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

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

如果有问题，你仍然会得到类型错误，只是在使用函数时，而不是在定义时。

有一个地方需要对类型进行注释，那就是函数输入位置——因为在那里无法推断它们。其他一切都是可选的。有时它有助于可读性，有时它会积极阻碍它。在这一点上用你的头脑，不要固守固定的规则。

尤其是使用 Redux Toolkit，您会获得许多非常具体的类型，并且手动注释这些类型将需要您在类型中复制代码，或者以丢失有价值信息的方式对其进行注释。