函数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,
},
},
},
};

存储

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>()希望我在启用@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

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

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

如果出现错误，您仍然会得到一个类型错误，只是在函数的使用上，而不是在定义上。

有一个地方需要注释类型，那就是函数输入位置，因为在那里无法推断类型。其他一切都是可选的。有时它有助于可读性，有时它会主动阻碍可读性。在这一点上要用心，不要拘泥于固定的规则。

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