[英]Typescript call signature error for exported async function
I have a Typescript file ( colorTheme.ts ) that looks like this:我有一个 Typescript 文件( colorTheme.ts ),如下所示:
export default (async (key) => {
console.log(key)
const themeImport = await import(`../build/theme/${key}/color.js`)
return themeImport
})()
And then I reference this function from a separate Typescript file like so:然后我从一个单独的 Typescript 文件中引用这个函数,如下所示:
import colorTheme from '../colorTheme'
colorTheme('test').then(color => {
// do stuff
})
However, I get an error:但是,我收到一个错误:
TS2349: Cannot invoke an expression whose type lacks a call signature.
TS2349:无法调用类型缺少调用签名的表达式。 Type 'Promise' has no compatible call signatures.
'Promise' 类型没有兼容的调用签名。
I've googled around and tried things like:我在谷歌上搜索并尝试了以下内容:
export default (async (key: string) => {
console.log(key)
const themeImport = await import(`../build/theme/${key}/color.js`)
return themeImport
})()
But to no avail.但无济于事。 Typescript isn't my forte, it's a preexisting environment that I'm trying to work in. From what I understand I need to somehow setup types for the Promise maybe?
Typescript 不是我的强项,它是我正在尝试工作的一个预先存在的环境。据我所知,我可能需要以某种方式为 Promise 设置类型? But I'm not sure how to do that.
但我不知道该怎么做。
Update: Added a bit more fuller code sample for what I'm trying to do.更新:为我正在尝试做的事情添加了更完整的代码示例。
Give a look at the two trailing parenthesis:看看后面的两个括号:
(async (x) => {
console.log(x)
})() <--
You are executing the function as you declare it.您在声明函数时正在执行该函数。 This is a so-called
IIFE
: Immediately Invoked Function Expression .这就是所谓的
IIFE
:立即调用函数表达式。
Let's split the export adding a variable:让我们拆分导出添加一个变量:
const result = (async (x) => {
console.log(x)
})();
export default result;
What's the value of result?结果的价值是什么? Well, the value of result is equal to the return value of the function.
那么,result 的值就等于函数的返回值。 If it was a normal function, this was equal to a function immediately resolved as
undefined
.如果它是一个普通函数,这等于一个立即解析为
undefined
的函数。 Since it is an async function and we aren't returning anything, this means that the returned value is a Promise
of undefined
.由于它是一个异步函数并且我们没有返回任何东西,这意味着返回的值是
undefined
的Promise
。
So what you are exporting is an already resolved promise!所以你要导出的是一个已经解决的承诺! But... what about the parameter x?
但是……参数 x 呢?
Well, the function accepts a parameter x
, but you are actually passing nothing.好吧,该函数接受一个参数
x
,但您实际上什么也没传递。 Watch again the trailing parenthesis, there is nothing inside, so you will see undefined
in the console if you execute the code.再看后面的括号,里面什么都没有,所以如果你执行代码,你会在控制台看到
undefined
。
If instead you passed an argument, for example a string, you saw that string:相反,如果您传递了一个参数,例如一个字符串,您会看到该字符串:
(async (x) => {
console.log(x) // It prints banana!
})('banana')
So here is the point where you have to pass the argument, then the function gets immediately invoked and the result is exported.所以这里是您必须传递参数的地方,然后立即调用该函数并导出结果。
Let's rewrite colorTheme.ts
in a simpler way:让我们以更简单的方式重写
colorTheme.ts
:
const result = (async (x) => {
console.log(x)
})();
export default result;
undefined
(it's the same of not returning) undefined
(和不返回一样)const result = (async (x) => {
console.log(x)
return undefined;
})();
export default result;
Promise
in place of async
Promise
代替async
const result = (x => {
console.log(x)
return Promise.resolve(undefined);
})();
export default result;
const f = function (x) {
console.log(x)
return Promise.resolve(undefined);
}
const result = f(undefined);
export default result;
So, this is basically what you exported.所以,这基本上就是你导出的内容。 Now it ups to you to fix it according to what you want to get!
现在由您来根据您想要的内容来修复它!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.