打字稿导出默认功能

Question

我目前的打字稿版本是1.6.2，我们将其编译为ECMA 5。我是打字稿的新手，所以请理解。这些是导入的库类型。

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;
}

在app.ts中：

import thunk from "redux-thunk";

console.log(thunk);

我不确定。这是取自的代码： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/redux-thunk/redux-thunk-tests.ts（7 和 16 行）

我在打字稿中使用默认导入的所有库都遇到了同样的问题。

编辑： @Steve Fenton 我正在使用 npm 为我完成这项工作。我刚刚注意到问题出在 Typescript 编译器上。当我使用导出默认函数创建打字稿文件时，我得到例如：

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

通知exports.default

当我查看从 npm 下载的 redux-thunk.js 文件时，有：

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'];

通知module.exports = exports['default'];

如果我将 redux-thunk 键入到 Babel 编译器中，我会得到 exports['default'] 风格的结果。

最重要的部分是，当我将 export['default'] 样式替换为 redux-thunk.js 中的 exports.default 样式时，一切正常。这是我的编译器的问题吗？

Answer 1

我的朋友刚刚在 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

javascript

default

typescript