如何在我的 Vuejs 项目中迁移 aws-amplify 以使用 Typescript？

Posted 2023-02-16

【中文标题】如何在我的 Vuejs 项目中迁移 aws-amplify 以使用 Typescript？

【英文标题】：How can I migrate aws-amplify in my Vuejs project to use Typescript?

【发布时间】：2021-10-19 19:15:44

【问题描述】：

我有一个现有的 Vuejs2 项目，我最近刚刚升级到 Typescript：

vue add typescript

我现在看到这个错误，我无法在 Google 搜索中找到答案：

 DONE  Compiled successfully in 2386ms                                1:49:51 PM

ERROR in .../front-end/src/main.ts(19,9):
19:9 No overload matches this call.
  Overload 1 of 2, '(plugin: PluginObject<unknown> | PluginFunction<unknown>, options?: unknown): VueConstructor<Vue>', gave the following error.
    Argument of type 'typeof import(".../front-end/node_modules/aws-amplify/lib-esm/index")' is not assignable to parameter of type 'PluginObject<unknown> | PluginFunction<unknown>'.
      Property 'install' is missing in type 'typeof import(".../front-end/node_modules/aws-amplify/lib-esm/index")' but required in type 'PluginObject<unknown>'.
  Overload 2 of 2, '(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): VueConstructor<Vue>', gave the following error.
    Argument of type 'typeof import(".../front-end/node_modules/aws-amplify/lib-esm/index")' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
      Property 'install' is missing in type 'typeof import(".../front-end/node_modules/aws-amplify/lib-esm/index")' but required in type 'PluginObject<any>'.
    17 | )
    18 | 
  > 19 | Vue.use(AmplifyModules)
       |         ^
    20 | Vue.use(VuetifyConfirm, 
    21 |   vuetify,
    22 |   buttonFalseColor: "primary",
Version: typescript 4.1.6
Time: 1727ms

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.149:8080/

我在 package.json 中的依赖项包含 "aws-amplify": "^1.3.3"

我对 Typescript 还是很陌生，我不确定为什么它找不到安装方法，或者我可能会明确地给它什么类型以使插件工作。不过值得注意的是，我的应用程序似乎仍然可以正常编译和运行。包括影响登录过程的 AWS Amplify 元素。

有人知道如何摆脱这个错误信息并满足 Typescript 的要求吗？

【参考方案1】：

看起来您可能需要更新 aws-amplify，因为当前版本是 4.2.3（请参阅 https://www.npmjs.com/package/aws-amplify）