TypeScript augmentation challenge

[garthk]

TypeScript Version: 1.8.0

Code Version: 1.2.0

Code:

I've put all the code in a gist, but the crux is that I want type system support for this line in example.ts:

store.dispatch(thunkedAction(1) as any);

I don't want to have to cast the thunkedAction result to any, but it's the only way I've found to make the compiler happy. It might be any of the following, but I've no idea which:

• Compiler bug
• Compiler feature gap edge case due to combination of typings globals, typings modules, npm modules, and local .d.ts files
• Insufficiently helpful documentation
• Insufficiently helpful messages
• A developer so frustrated he can no longer think straight

I sincerely hope it's the latter, as then someone will be able to set me straight quickly.

Typings supporting the above code:

declare module "redux-thunk" {
    import { Middleware, Dispatch } from 'redux';

    export interface Thunk extends Middleware {}
    export interface ThunkInterface<R> {
      <S>(dispatch: Dispatch<S>, getState?: () => S): R;
    }

    var thunk: Thunk;
    export default thunk;
}

Failing augmentation for redux.Dispatch which seems to override node_modules/redux/index.d.ts for the entire project:

declare module "redux" {
    export interface Dispatch<S> {
        <R>(thunkAction: ThunkInterface<R>): R;
    }
}

Expected behavior:

Per reduxjs/redux#1712, being able to augment redux.Dispatch<S>.

Actual behavior:

Wailing, gnashing of teeth, dumpster fires, sirens in the distance.

[mhegazy]

So i am not familiar with redux to know if the issue is in the usage or the declaration. The module augmentation seems to work fine for me using your project i am not sure i understand what is the issue.

A note for future issue reporting, a git repo is much better way to share the state than a gist.

[domgee]

@mhegazy The problem is that if you put the module augmentation in a separate file then it hides the module definition in node_modules/redux.

@garthk The only way I have found to get it working is to move redux's index.d.ts out of node_modules and wrap it's contents with

declare module 'redux' { ... }

Then module augmentations work as expected. I don't know enough about TypeScript to know why this behaves differently to using the typings distributed with redux, or how to solve it in a better way. What I have is an npm postinstall script that does all this, and as unsatisfactory as it is, it is the only way I have found that works.

If you or anyone else finds a better way, please let me know!

[mhegazy]

@mhegazy The problem is that if you put the module augmentation in a separate file then it hides the module definition in node_modules/redux.

The file needs to be a module. just like i did.

so something like this should work:

/// myAugmentationFile.ts
import * as redux from "redux";

declare module "redux" {
    export interface Dispatch<S> {
        <R>(thunkAction: ThunkInterface<R>): R;
    }
}

[domgee]

Yes, that works! I was just missing the import statement at the top of my augmentation file.

Thank you @mhegazy!

[mhegazy]

glad it is resolved.