如何将 signUpConfig 传递给 Amplify 的 withAuthenticator HOC 而不会出现 Typescript 错误

Question

我正在尝试使用 Typescript 和 AWS Amplify 创建一个 React 应用程序以进行用户身份验证。我想将注册字段限制为仅电子邮件和密码。

根据 AWS doc，我应该可以使用下面提供的最小示例来实现这一点，但是

TypeScript error in ......../frontend/src/App.tsx(43,41):
Argument of type '{ signUpConfig: { header: string; hideAllDefaults: boolean; signUpFields: { label: string; key: string; required: boolean; displayOrder: number; type: string; }[]; }; }' is not assignable to parameter of type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.
  Object literal may only specify known properties, and 'signUpConfig' does not exist in type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.  TS2345

    41 |   };
    42 | 
  > 43 | export default withAuthenticator(App, { signUpConfig });
       |                                         ^
    44 |

最小示例

import './App.css';
import React from 'react';
import awsConfig from './amplify-config';

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import Amplify from 'aws-amplify';

Amplify.configure(awsConfig);

function App() {
  return (
    <div className="App">
        
    <AmplifySignOut />
      <header className="App-header">
        Test
      </header>
    </div>
  );
}

const signUpConfig = {
    header: 'My Customized Sign Up',
    hideAllDefaults: true,
    signUpFields: [
      {
        label: 'My custom email label',
        key: 'email',
        required: true,
        displayOrder: 1,
        type: 'string'
      },
      {
        label: 'My custom email label',
        key: 'password',
        required: true,
        displayOrder: 2,
        type: 'password'
      }
    ]
  };

export default withAuthenticator(App, { signUpConfig });

我试图弄清楚 signUpConfig 的打字稿类型是什么。我认为那是 ComponentPropsWithRef<typeof AmplifyAuthenticator>，但对于将什么放入 signUpConfig 对象或为什么它不起作用，这并没有真正帮助我。根据错误消息，类型是 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'，但这对我也没有任何帮助。

如果我没有传入 signUpConfig，那么该应用程序将按预期运行。

如果我传入 signUpConfig 而没有将其包装在 {} 中，则会出现此错误。

Type '{ header: string; hideAllDefaults: boolean; signUpFields: { label: string; key: string; required: boolean; displayOrder: number; type: string; }[]; }' has no properties in common with type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.

Answer 1

最新版本（今天是 2021 年 4 月 21 日）@aws-amplify/ui-react 库现在基于插槽，需要稍微不同的配置方法。对我有用的是放大文档中的这个例子：https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#customization

如何将 signUpConfig 传递给 Amplify 的 withAuthenticator HOC 而不会出现 Typescript 错误

How do I pass signUpConfig to Amplify's withAuthenticator HOC without getting Typescript errors

typescript

reactjs

aws-amplify

aws-amplify-sdk-js