使用 JHipster 和 React 的 adyen 电子商务演示问题

Question

我使用最新的 JHipster 6.10.5 版本创建了一个新项目。我按照演示的所有先前步骤没有错误。现在，当我在项目中 copy/paste checkout-status.tsx 的内容时，出现以下错误。

TS2345: Argument of type '(props: { closeShoppingCart: (paymentType: any) => (dispatch: any) => Promise<any>; }) => JSX.Element' is not assignable to parameter of type 'ComponentType<Matching<{ closeShoppingCart: (paymentType: any) => Promise<any>; }, { closeShoppingCart: (paymentType: any) => (dispatch: any) => Promise<any>; }>>'.
  Type '(props: { closeShoppingCart: (paymentType: any) => (dispatch: any) => Promise<any>; }) => JSX.Element' is not assignable to type 'FunctionComponent<Matching<{ closeShoppingCart: (paymentType: any) => Promise<any>; }, { closeShoppingCart: (paymentType: any) => (dispatch: any) => Promise<any>; }>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'PropsWithChildren<Matching<{ closeShoppingCart: (paymentType: any) => Promise<any>; }, { closeShoppingCart: (paymentType: any) => (dispatch: any) => Promise<any>; }>>' is not assignable to type '{ closeShoppingCart: (paymentType: any) => (dispatch: any) => Promise<any>; }'.
        The types returned by 'closeShoppingCart(...)' are incompatible between these types.
          Type 'Promise<any>' is not assignable to type '(dispatch: any) => Promise<any>'.
            Type 'Promise<any>' provides no match for the signature '(dispatch: any): Promise<any>'.
Version: typescript 3.8.3, eslint 6.8.0
Time: 33830 ms

我调查了这个错误，但没有找到任何解决方案。我需要您的帮助才能继续其他步骤。你可以找到演示的源代码 here.

Answer 1

example 使用 JHipster v6.8.0，这就是您看到错误的原因，因为较新版本的 JHipster 中的较新版本的 TypeScript 正在捕获旧版本所遗漏的签名问题在回购协议中。我确实在 JHipster 6.10.5 上重现了这个问题，这里是解决方案

在 src/main/webapp/app/entities/shopping-cart/shopping-cart.reducer.ts 中将 const closeShoppingCart 的方法签名更改为以下内容。基本上我们在这里为方法添加了一个更好的类型声明以使 TypeScript 快乐

export const closeShoppingCart: ICrudPutAction<string> = (paymentType: string) => async dispatch => {
  const result = await dispatch({
    type: ACTION_TYPES.UPDATE_SHOPPINGCART,
    payload: axios.put(`${apiUrl}/close/${paymentType}`)
  });
  return result;
};

同样在 src/main/webapp/app/modules/checkout/checkout-status.tsx 中，对于 const CheckoutStatus，您需要为 const { type } = useParams(); 添加类型，只需更改为 const { type } = useParams<{type: string}>();

注意：顺便说一句，你是从一个特定的提交中复制的，但是 repo 本身有更新的提交，特别是对于你正在复制的部分，所以确保你没有混合代码来自不同的提交，如果您遵循 blog，应该不是问题。完成博客检查后，更新的提交因为有一些改进

使用 JHipster 和 React 的 adyen 电子商务演示问题

Problem with adyen ecommerce demo Using JHipster and React

reactjs

typescript

jhipster