导出的异步功能的打字稿呼叫签名错误

Question

我有一个打字稿文件（ colorTheme.ts ），如下所示：

export default (async (key) => {
  console.log(key)
  const themeImport = await import(`../build/theme/${key}/color.js`)
  return themeImport
})()

然后我从一个单独的Typescript文件中引用此函数，如下所示：

import colorTheme from '../colorTheme'

colorTheme('test').then(color => {
  // do stuff
})

但是，我得到一个错误：

  

TS2349：无法调用类型缺少调用签名的表达式。类型“ Promise”没有兼容的呼叫签名。

我已经在Google周围搜索并尝试了以下操作：

export default (async (key: string) => {
  console.log(key)
  const themeImport = await import(`../build/theme/${key}/color.js`)
  return themeImport
})()

但无济于事。 Typescript不是我的强项，它是我正在尝试使用的预先存在的环境。从我的理解中，我可能需要某种方式为Promise设置类型？但是我不确定该怎么做。

更新：针对我要执行的操作添加了更完整的代码示例。

Answer 1

看看后面的两个括号：

(async (x) => {
  console.log(x)
})() <--

您正在执行声明的函数。这就是所谓的IIFE：立即调用函数表达式。

让我们拆分导出并添加一个变量：

const result = (async (x) => {
  console.log(x)
})();

export default result;

结果的价值是什么？好吧，结果的值等于函数的返回值。如果它是正常函数，则等于立即解析为undefined的函数。由于它是一个异步函数，我们不返回任何东西，所以这意味着返回的值是Promise的{​​{1}}。

因此，您要导出的是已经解决的承诺！但是...参数x呢？

好吧，该函数接受参数undefined，但实际上您什么也没传递。再次注意结尾的括号，里面没有任何内容，因此如果执行代码，您将在控制台中看到x。

相反，如果您传递了一个参数（例如字符串），则会看到该字符串：

undefined

所以这是您必须传递参数的地方，然后立即调用该函数并导出结果。

让我们以一种更简单的方式重写(async (x) => { console.log(x) // It prints banana! })('banana') ：

1。添加变量

colorTheme.ts

2。返回const result = (async (x) => { console.log(x) })(); export default result; （与不返回相同）

undefined

3。使用const result = (async (x) => { console.log(x) return undefined; })(); export default result; 代替Promise

async

4。不要立即调用该功能

const result = (x => {
  console.log(x)
  return Promise.resolve(undefined);
})();

export default result;

因此，这基本上就是您导出的内容。现在，您可以根据自己想要的东西来修复它！