用於打字稿問題的 AWS Amplify @aws-amplify/ui-react Authenticator 功能道具類型

Question

花了很長時間嘗試在我的 aws amplify 應用程序中使用相關類型，該應用程序使用 amplify auth。

@aws-amplify/ui-react 模塊一直在努力正確輸入道具。

記錄的用例：

<Authenticator>
  {({ signOut, user }) => (
      <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
      </main>
  )}
</Authenticator>

我想分別輸入 signOut 和 user 道具。 IDE 建議應該像這樣鍵入道具：

signOut 是((data?: (AuthEventData | undefined)) => void) | undefined ((data?: (AuthEventData | undefined)) => void) | undefined

用戶是CognitoUserAmplify

因此，從 aws-amplify 模塊導入這些會引發以下錯誤：

模塊 '"aws-amplify"' 沒有導出的成員 'AuthEventData

模塊“aws-amplify”沒有導出成員“CognitoUserAmplify”

如果要添加類型，推薦方法是什么？ 所有記錄在案的演示都在 JavaScript 中，並且沒有提及打字稿類型或類型。

Answer 1

我不確定推薦的方法是什么，但我通過以下方式解決了它：

import { AuthEventData, CognitoUserAmplify } from '@aws-amplify/ui-react/node_modules/@aws-amplify/ui';

type AppProps = {
    signOut: ((data?: (AuthEventData | undefined)) => void) | undefined;
    user: CognitoUserAmplify | undefined;
};

const App = ({ signOut, user }: AppProps) => {
...
}