@aws-amplify/ui-react Authenticator TypeScript类型报错咨询

报错原因 #

你遇到的导出不存在报错，本质是导包路径错误：AuthEventData、CognitoUserAmplify 这两个类型属于@aws-amplify/ui-react包的公开导出成员，并不在aws-amplify核心包的导出列表中，从核心包导入自然会触发模块无对应导出成员的TS错误。

实现方案 #

最简推荐写法（无需手动导入类型） #

@aws-amplify/ui-react 已经对Authenticator组件做了完整的TypeScript类型封装，直接使用组件时，render props里的所有参数会被TS自动推导类型，完全不需要手动给signOut、user逐个加类型标注：

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

export default function AuthApp() {
  return (
    <Authenticator>
      {/* signOut、user的类型会被自动推导，无需手动标注 */}
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

需要显式标注类型的写法 #

如果你的场景需要显式引用对应类型，直接从@aws-amplify/ui-react包导入即可：

import { 
  Authenticator, 
  AuthEventData, 
  CognitoUserAmplify 
} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

export default function AuthApp() {
  return (
    <Authenticator>
      {({
        signOut,
        user
      }: {
        signOut?: (data?: AuthEventData) => void;
        user?: CognitoUserAmplify;
      }) => (
        <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

注意事项 #

• 所有和@aws-amplify/ui-react组件相关的类型，优先从该UI包本身导入，不要跨包从aws-amplify核心包或者底层Cognito依赖包导入，避免引用到未公开的私有类型。
• 如果自动推导失效，先检查本地安装的@aws-amplify/ui-react版本，升级到3.x以上的稳定版本即可获得完整的TS类型支持。

内容的提问来源于stack exchange，提问作者Chief