[英]Typescript error “Property 'then' does not exist” when chaining promises with promise-middleware + thunk
I'm using redux-promise-middleware with redux-thunk in order to chain my promises: 我将redux-promise-middleware与redux-thunk结合使用,以实现我的承诺:
import { Dispatch } from 'redux';
class Actions {
private static _dispatcher: Dispatch<any>;
public static get dispatcher(): Dispatch<any> {
return Actions._dispatcher;
}
public static test() {
this.dispatcher({
type: 'MY_ACTION',
payload: new Promise(resolve => resolve('hi'));
}).then(result => {
console.log(result); // this works
});
}
}
The code above works but also generates a warning during compile time: 上面的代码有效,但在编译时也会生成警告:
TS2339: Property 'then' does not exist on type '{ type: string; TS2339:类型'{type:string;上不存在属性'then' payload: Promise<{}>; 有效负载:Promise <{}>; }' }”
It sounds like I need to include Promise<...>
somewhere as a type so typescript knows that then
is in fact a property on the object that's returned by dispatcher()
but I haven't been able to remove the error. 这听起来像我需要包括Promise<...>
某处的类型,以便打字稿知道, then
其实多数民众赞成通过返回的对象上的属性dispatcher()
但我一直没能清除错误。
https://github.com/gaearon/redux-thunk/issues/103 https://github.com/gaearon/redux-thunk/issues/103
import { Dispatch } from 'redux';
import { ThunkAction } from 'redux-thunk';
import { getStore, IState } from './my_store';
let store = getStore();
// Create myThunkAction function with a type of ThunkAction<R, S, E>
let myThunkAction: ThunkAction<Promise<string>, IState, null> =
(dispatch: Dispatch<IState>, getState: () => IState) => {
return new Promise<string>((resolve, reject) => {
// do async stuff with getState() and dispatch(), then...
resolve('done!');
});
}
store.dispatch(myThunkAction)
.then(() => {
// do stuff after the thunk has finished...
});
Seems related but where I can specify the action type ie MY_ACTION
? 似乎相关,但是我可以在其中指定操作类型,即MY_ACTION
?
As you can see in this ts playground the variable a
exposes the same keys as the type of Dispatch<any>
, and as you can see if you mouse over the error, the error message is the same as in your case. 正如您在ts游乐场所看到的那样 ,变量a
公开了与Dispatch<any>
类型相同的键,并且您可以看到是否将鼠标悬停在错误上,错误消息与您的情况相同。 In order to access the promise (and there for the then
function) you will have to access the payload
of the Dispatch object. 为了访问promise( then
是then
函数),您将必须访问Dispatch对象的payload
。
this.dispatcher({ ... }).payload.then(....);
Edit1: EDIT1:
If we take a look at the typings for redux we can quite quickly find the Dispatcher interface. 如果我们查看redux的类型,我们可以很快找到Dispatcher界面。
export interface Dispatch<S> {
<A extends Action>(action: A): A;
}
export interface Action {
type: any;
}
And then through some rewriting and some liberal use of psudocode, we can deduct that the type of Dispatch is a function that takes one argument witch is an object and returns an object of the same type as the argument. 然后通过一些重写和对psudocode的一些自由使用,我们可以得出Dispatch类型是一个函数,该函数接受一个参数,女巫是一个对象,并返回与该参数相同类型的对象。
type Dispatch: (action: {type: any, ...}) => {type: any, ...}
Both the input object and the output object is of the type: 输入对象和输出对象都是以下类型:
interface {
type: any,
[key: string]: value
}
In conclusion, either 1) you are not using the official typings for redux, 2) the official typings for redux is wrong, or 3) you have missed something in your live environment were in fact the code doesn't work. 总之,要么1)您没有在redux上使用正式类型,要么2)在redux上的正式类型不正确,或者3)您在实时环境中错过了某些东西,而实际上该代码是行不通的。
Edit2: EDIT2:
I haven't tried this code, so i have no idea if it will actually solve your problem. 我没有尝试过这段代码,所以我不知道它是否能真正解决您的问题。 But you could try to redefine the Dispatch interface. 但是您可以尝试重新定义Dispatch接口。
declare module 'redux' {
export interface Action {
type: any;
}
export interface Dispatch<S> {
<A extends Action>(action: A): Promise<S>;
}
}
It is valid typescript as you can see in this playground , but I haven't had to do this my self before, so this might not work out of the box. 您可以在这个操场上看到它是有效的打字稿,但是我以前不必自己做,所以开箱即用。
If that doesn't work you could try defining a namespace with the same name as the module. 如果这样不起作用,您可以尝试定义一个与模块同名的名称空间。
namespace redux {
export interface Action {
type: any;
}
export interface Dispatch<S> {
<A extends Action>(action: A): Promise<S>;
}
}
Still I haven't tried this before, so I cant guarantee it will work. 还是我以前没有尝试过,所以我不能保证它会工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.