Typescript export default function

Question

My current typescript version is 1.6.2 and we compile it to ECMA 5. I am new to TypeScript so please be understanding. These are the imported library typings.

redux-thunk.d.ts:

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

    export interface Thunk extends Middleware { }

    export interface ThunkInterface {
        <T>(dispatch: Dispatch, getState?: () => T): any;
    }

    var thunk: Thunk;

    export default thunk;
}

In app.ts:

import thunk from "redux-thunk";

console.log(thunk);

I am getting undefined. This is the code taken from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/redux-thunk/redux-thunk-tests.ts (7 and 16 lines)

I've got the same problem with all libraries that uses default import in typescript.

EDIT: @Steve Fenton I am using npm to do the job for me. I've just noticed that the problem is with Typescript compiler. When I create typescript file with export default function I get for example:

Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {
    nextQuestion: nextQuestion,
};

Notice exports.default

When I look into redux-thunk.js file downloaded from npm there is:

exports.__esModule = true;
exports['default'] = thunkMiddleware;

function thunkMiddleware(_ref) {
    var dispatch = _ref.dispatch;
    var getState = _ref.getState;

    return function (next) {
        return function (action) {
            return typeof action === 'function' ? action(dispatch, getState) : next(action);
        };
    };
}

module.exports = exports['default'];

Notice module.exports = exports['default'];

If I take redux-thunk typings into Babel compiler I get the results with exports['default'] style.

The most important part is that when I replace export['default'] style to exports.default style in redux-thunk.js then everything works. Is this a problem with my compiler?

With ES5 you can use import thunk = require('redux-thunk'). If you want to use import either import * as thunk from 'redux-thunk' or import {thunk} from 'redux-thunk' — Rik
@Rik What is the difference between import thunk from "redux-thunk"; and import * as thunk from "redux-thunk"; ? if there is only one export default shouldn't both return the same? — MistyK
To be honest, I don't know why it won't work. Maybe it's ES6 syntax. I am not so much of a typescript guru. — Rik
How are you including the actual JavaScript file for redux-think in your application? — Fenton

MistyK MistyK · Accepted Answer · 2015-11-09T22:29:48

My friend just got the answer on github: https://github.com/Microsoft/TypeScript/issues/5565#issuecomment-155216760

ahejlsberg answer: It appears the "redux-logger" module was transpiled with Babel. When Babel transpiles a module whose only export is an export default it injects a module.exports = exports["default"]; into the generated code, causing the exported object to become the function itself (instead of a module object that has the function as the default property). When paired with the _interopRequireDefault magic that Babel generates for imports the net effect is that a fake module object with a default property is created and the function can now be accessed as _reduxLogger2.default.

TypeScript doesn't do any of this magic (see here for more details). In order for TypeScript to consume the module you need to change the redux-logger.d.ts declaration file to actually reflect what is going on

Typescript export default function

1 Answers