momentJS上的打字稿模块系统行为奇怪

Question

我正在尝试使用typescript中的momentJs:取决于我用来编译typescript的模块系统,我发现了一个不同的行为,我可以使用momentJs.使用commonJs编译typescript时,一切都按预期工作,我可以按照momentJs文档:

import moment = require("moment");
moment(new Date()); //this works

如果我在导入"时刻"时使用"system"作为打字稿模块系统,我不得不这样做

import moment = require("moment");
moment.default(new Date()); //this works
moment(new Date()); //this doesn't work

我发现了一种解决方法,无论使用哪种打字稿模块系统,它们都能正常工作

import m = require("moment")
var moment : moment.MomentStatic;
moment = (m as any).default || m;

我不喜欢这个,我想理解为什么它会像这样.难道我做错了什么？谁能解释一下我发生了什么？

Answer 1

我通过替换解决了这个问题

import moment from "moment";

导入语句与

import * as moment from "moment";

这。

Answer 2

这是因为SystemJS moment通过将其包装在模块对象中而自动转换为ES6样式的模块,而CommonJS则不会.

当CommonJS拉入时moment,我们得到实际的moment功能.这就是我们在JavaScript中已经做了一段时间了,它应该看起来非常熟悉.就像你写的那样:

var moment = function moment() {/*implementation*/}

当SystemJS拉入时moment,它不会给你当时的功能.它创建一个对象,其中将矩函数分配给名为的属性default.就像你写的那样:

var moment = {
    default: function moment() {/*implementation*/}
}

为什么这样做？因为根据ES6/TS,模块应该是一个或多个属性的映射,而不是函数.在ES6中,以前导出自身的大规模外部库的约定是default使用模块对象的属性导出自身export default(在这里阅读更多;在ES6/TypeScript中,您可以使用紧凑import moment from "moment"语法导入这样的函数).

你没有做错任何事,你只需要选择导入模块的格式,并坚持你的选择.如果要同时使用CommonJS和SystemJS,可以考虑将它们配置为使用相同的导入样式.搜索'systemjs default import'让我对您的问题进行了讨论,并在其中实现了--allowSyntheticDefaultImports设置.

Answer 3

我做了以下事情:

我安装了moment 定义文件如下:

tsd install moment --save

然后我创建了main.ts:

///<reference path="typings/moment/moment.d.ts" />

import moment = require("moment");
moment(new Date());

我跑了:

$ tsc --module system --target es5 main.ts # no error 
$ tsc --module commonjs --target es5 main.ts # no error 

main.js 看起来像这样:

// https://github.com/ModuleLoader/es6-module-loader/blob/v0.17.0/docs/system-register.md - this is the corresponding doc
///<reference path="typings/moment/moment.d.ts" />
System.register(["moment"], function(exports_1) {
    var moment;
    return {
        setters:[
            function (moment_1) {
                // You can place `debugger;` command to debug the issue
                // "PLACE XY"
                moment = moment_1;
            }],
        execute: function() {
            moment(new Date());
        }
    }
});

我的TypeScript版本是1.6.2.

这是我发现的:

Momentjs导出一个函数(即_moment = utils_hooks__hooks,它utils_hooks__hooks是一个函数,非常清楚.

如果在我PLACE XY上面指出的位置放置一个断点,你可以看到它moment_1是一个对象(!)而不是一个函数.相关线路:1,2

TL; DR:总而言之,问题与TypeScript无关.问题是systemjs不保留momentjs导出函数的信息.Systemjs只是从模块中复制导出对象的属性(函数也是JavaScript中的对象).我想你应该在systemjs存储库中提出一个问题,看看他们是否认为它是一个bug(或一个功能:)).