尝试将 Vue.js 的 SO 配置解决方案从 JS 移植到基本 TS

Posted 2023-02-16

【中文标题】尝试将 Vue.js 的 SO 配置解决方案从 JS 移植到基本 TS

【英文标题】：Trying to port a SO confguration solution for Vue.js from JS to basic TS

【发布时间】：2021-10-16 21:52:51

【问题描述】：

在这篇 SO 帖子中，展示了如何向 Vue 应用程序添加简单的配置，

Link to SO post

上面的答案使用下面的JS代码。

    fetch(process.env.BASE_URL + "config.json")
  .then((json) => 
    json().then((config) => 
       Vue.prototype.$config = config
       new Vue(
         router,
         store,
         render: (h) => h(App)
       ).$mount("#app")
    )
)

我将其放入我的 TS 代码中，并得到以下错误。

D:/TFS/StudentPortal4Vue/clientapp/src/main.ts(44,13) 中的错误：44:13 此表达式不可调用。类型“响应”没有调用 签名。 42 | .then((json) => 43 |

44 | json().then((配置) => | ^ 45 | 46 | Vue.prototype.$config = 配置； 47 |新的 Vue( 版本：打字稿 4.3.2

对我来说很明显我有类型问题，但我不知道如何解决它。

（在 ts 上超级新，在 JS 和 Vue 上老但不成熟）

【参考方案1】：

代码有错误……应该是这样的：

fetch(process.env.BASE_URL + "config.json")
.then((response) => response.json())
.then((config) => 
       Vue.prototype.$config = config
       new Vue(
         router,
         store,
         render: (h) => h(App)
       ).$mount("#app")
)

【讨论】：

看起来有效，如何在这样的情况下使用它：Vue.use(Auth, issuer: this.$config.okta_issuer, client_id: 'XXXXXXXXXXXXXXXXXX', redirect_uri: ' localhost:8080/callback'，范围：['openid'，'profile'，'email']，tokenManager：存储：'sessionStorage'，）；