导出的异步函数的Typescript调用签名错误

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：无法调用类型缺少调用签名的表达式。 “承诺”类型没有兼容的呼叫签名。

我已经google了一下，尝试过这样的事情：

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

但无济于事。打字稿不是我的强项，它是我正在努力工作的预先存在的环境。据我所知，我需要以某种方式为Promise设置类型吗？但我不知道该怎么做。

更新：为我正在尝试的内容添加了更多更完整的代码示例。

Answer 1

看看两个尾部括号：

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

您在声明它时正在执行该功能。这是一个所谓的IIFE：立即调用函数表达式。

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

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

export default result;

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

所以你出口的是一个已经解决的承诺！但是......参数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;

所以，这基本上就是你出口的东西。现在你可以根据自己想要的东西修复它！