function 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上可以看到返回類型，但它需要頻繁更新，因為它列出了商店狀態。

如何使 function 避免要求返回類型，因為它已經推斷出而不禁用規則？ 謝謝你。

套餐：

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

Answer 1

至少在這一行禁用規則。 就是這樣。

說真的，這條規則是有害的。 您不需要激活每個現有的 eslint 規則，並且強制使用某些類型進行注釋的規則尤其有害，導致您刪除可用的類型信息。

如果出現問題，您仍然會收到類型錯誤，只是在使用 function 時，而不是在定義時。

有一個地方需要對類型進行注釋，那就是在 function 輸入位置 - 因為在那里無法推斷它們。 其他一切都是可選的。 有時它有助於可讀性，有時它會積極阻礙它。 在這一點上用你的頭腦，不要堅持一個固定的規則。

尤其是使用 Redux 工具包，您會獲得許多非常具體的類型，並且手動注釋這些類型將需要您在類型中復制代碼，或者以丟失有價值信息的方式對其進行注釋。