typescript - vue - Los sistemas de módulos de typcript en momentJS se comportan de forma extraña

moment vue

Question

Estoy tratando de usar momentJs de mecanografía: dependiendo del sistema de módulos que esté usando para compilar mecanografia, encuentro un comportamiento diferente sobre cómo puedo usar momentJs. Cuando compilo el script de escritura con commonJs, todo funciona como se espera y puedo seguir la documentación de momentJs:

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

Si utilizo "sistema" como sistema de módulo mecanografiado cuando importo "momento" me veo obligado a hacerlo

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

Encontré una solución alternativa para hacer que ambos funcionaran independientemente del sistema de módulo de escritura de tipos utilizado

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

No me gusta esto, y me gustaría entender por qué se comporta así. ¿Estoy haciendo algo mal? ¿Alguien me puede explicar qué está pasando?

Answer 1

Así es como lo hice con System.js y Typescript 1.7.5

import * as moment from "moment";
...
moment.utc(); // outputs 2015 (for now).

Pero tenga en cuenta que estoy usando el método utc() . No puedo usar moment() porque como mk. ha explicado, esto se convierte en moment.default() por System.js. Definitivamente, las tipografías tipificadas no contienen default método default , por lo tanto, para evitar el error de compilación, se debería usar algo como moment["default"]() (lo sé, feo).

El siguiente paso, necesitaba agregar lo siguiente a la configuración de System.js:

System.config({
  paths: {
    ''moment'': ''node_modules/moment/moment.js''
  }
});

Después de esto, todos trabajaron como un encanto.

Answer 2

Esto sucede porque SystemJS está convirtiendo automáticamente el moment en un módulo de estilo ES6 envolviéndolo en un objeto de módulo, mientras que CommonJS no lo está.

Cuando CommonJS toma un moment , obtenemos la función de moment real. Esto es lo que hemos estado haciendo en JavaScript por un tiempo, y debería parecer muy familiar. Es como si escribieras:

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

Cuando SystemJS toma un moment , no le da la función de momento. Crea un objeto con la función de momento asignada a una propiedad denominada por default . Es como si escribieras:

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

¿Porque hace eso? Debido a que un módulo debe ser un mapa de una o más propiedades, no una función, de acuerdo con ES6 / TS. En ES6, la convención para bibliotecas externas masivas que antes se exportaban a sí mismas es exportarse a sí mismas bajo la propiedad default de un objeto de módulo usando export default (lea más here ; en ES6 / TypeScript, puede importar funciones como esta usando el import moment from "moment" compacta import moment from "moment" sintaxis).

No está haciendo nada malo, solo debe elegir el formato de sus módulos importados y atenerse a su elección. Si desea usar tanto CommonJS como SystemJS, puede considerar configurarlos para que usen el mismo estilo de importación. Una búsqueda de ''importación predeterminada del sistema'' me llevó a esta discusión de su problema, en la que implementan la configuración --allowSyntheticDefaultImports .

Answer 3

Fue un momento difícil trabajar en el proyecto en el que estoy trabajando, pero terminamos resolviéndolo con esto:

import momentRef = require(''moment'');
var moment: moment.MomentStatic = momentRef;

Answer 4

Hice lo siguiente:

Instalé el archivo de definición de moment como sigue:

tsd install moment --save

Entonces creé main.ts :

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

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

Y corrí:

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

main.js ve así:

// 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());
        }
    }
});

Mi versión de TypeScript es 1.6.2.

Esto es lo que descubrí:

Momentjs exporta una function (es decir, _moment = utils_hooks__hooks y utils_hooks__hooks es una función, eso está bastante claro).

Si coloca un punto de interrupción en el lugar que he indicado anteriormente como PLACE XY , puede ver que moment_1 es un objeto (!) Y no una función. Líneas relevantes: 1 , 2

TL; DR: Para concluir, el problema no tiene nada que ver con TypeScript. El problema es que systemjs no conserva la información que momentjs exporta una función. Systemjs simplemente copia las propiedades del objeto exportado desde un módulo (una función es un objeto en JavaScript también). Supongo que deberías presentar un problema en el repositorio de systemjs para saber si lo consideran un error (o una característica :)).

Answer 5

Para mi system.config:

paths: {
    ''moment'': ''node_modules/moment/moment.js''
},
packages: {
    app: {
        format: ''register'',
        defaultExtension: ''js''
    }
}

Al importar momentjs en mi componente, eliminé el * que creo que trata el código en el archivo moment.js como múltiples objetos.

Cambio:

import * as moment from ''moment'';

a:

import moment from ''moment'';

Answer 6

tuve

import * as moment from ''moment'';

Y cambié todo lo que pensé que debía ser.

var date: moment = moment();

a

var date: moment.Moment = moment();