导出的异步函数的打字稿调用签名错误

Question

我有一个 Typescript 文件（ 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' 类型没有兼容的调用签名。

我在谷歌上搜索并尝试了以下内容：

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;

结果的价值是什么？ 那么，result 的值就等于函数的返回值。 如果它是一个普通函数，这等于一个立即解析为undefined的函数。 由于它是一个异步函数并且我们没有返回任何东西，这意味着返回的值是undefined的Promise 。

所以你要导出的是一个已经解决的承诺！ 但是……参数 x 呢？

好吧，该函数接受一个参数x ，但您实际上什么也没传递。 再看后面的括号，里面什么都没有，所以如果你执行代码，你会在控制台看到undefined 。

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

(async (x) => {
  console.log(x) // It prints banana!
})('banana')

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

让我们以更简单的方式重写colorTheme.ts ：

1.添加变量

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

export default result;

2.返回undefined （和不返回一样）

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

export default result;

3. 使用Promise代替async

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

export default result;

4. 不要立即调用函数

const f = function (x) {
  console.log(x)
  return Promise.resolve(undefined);
}

const result = f(undefined);

export default result;

所以，这基本上就是你导出的内容。 现在由您来根据您想要的内容来修复它！