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

问题描述 投票:2回答:1

我有一个看起来像这样的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设置类型吗?但我不知道该怎么做。

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

javascript typescript promise async-await
1个回答
2
投票

看看两个尾部括号:

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

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

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

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

export default result;

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.