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

【问题标题】：How do I pass signUpConfig to Amplify's withAuthenticator HOC without getting Typescript errors如何将 signUpConfig 传递给 Amplify 的 withAuthenticator HOC 而不会出现 Typescript 错误
【发布时间】：2020-12-02 16:26:32
【问题描述】：

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

根据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<...>'.

【问题讨论】：

标签： reactjs typescript aws-amplify aws-amplify-sdk-js

【解决方案1】：

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

【讨论】：

"signUpConfig" 根本不在那个页面上
据我所知，如果您使用的是withAuthenticator HOC，这个较新的版本并没有给您任何自定义注册字段的方法。