来自 redux-toolkit 的 createAsyncThunk 中的错误响应类型错误

Question

你怎么了？为什么 err 是 typecipt 的错误？有这样的问题：

<块引用>

ESLint：不安全的成员访问 .response 对任何 值。（@typescript-eslint/no-unsafe-member-access）

这里是问题代码的主要部分：

 } catch (err) {
         // Here is problem
          if (!err.response) {
            throw err;
          }
          return rejectWithValue(err);
        }

这里是完整的代码：

export const actionFetchDataUser = createAsyncThunk(
  'data/user',
  async (formVal: TformVal, { rejectWithValue }) => {
    try {
      const GoogleAuth = window.gapi.auth2.getAuthInstance();
      const profileMail = await GoogleAuth.signIn({
        scope: 'profile email',
      });
      const googleEmail = profileMail.getBasicProfile().getEmail();
      if (googleEmail !== formVal.email) {
        throw Error('There is NO email');
      }
      return {
        name: profileMail.getBasicProfile().getName(),
        ava: profileMail.getBasicProfile().getImageUrl(),
      };
    } catch (err) {
     // Here is problem
      if (!err.response) {
        throw err;
      }
      return rejectWithValue(err);
    }
  },
);

Answer 1

在 TypeScript 中，catch 块中的所有内容总是在您对其进行任何断言之前键入 any - 因为字面上的 anything 可以是 thrown 在任何函数中从 try 块调用。你可以在那里throw 5，你可以在那里throw new Error("foo")，你可以在那里throw new Date()，TypeScript 不知道。

因此，您正在那里访问 any.response - 虽然这是完全有效的 TypeScript，但您已经以警告您的方式配置了您的 linter。 如果您想进行这种访问，请禁用该 lint 规则（假设您在其他任何地方都没有从中获得任何价值），或者在此处执行类似 (err as Something).response 的类型断言。

不过，整个问题与 React 或 Redux 无关。

Answer 2

为了解决这个问题，我遵循了作者 phry 的建议

catch (err) {
      const hasErrResponse = (err as { response: { [key: string]: string } }).response;
      if (!hasErrResponse) {
        throw err;
      }
      return rejectWithValue(hasErrResponse);
    }