month - ¿Cómo usar momentjs en TypeScript con SystemJS?

moment to timestamp

Question

La configuración de mi proyecto incluye la herramienta ''jspm'' para bibliotecas y la herramienta ''tsd'' para tipings.

Después de instalar el archivo d.ts de TypeScript del momento ( these ), no puedo encontrar una manera de cargar y utilizar una instancia de momento.

En mi archivo (usando la carga del módulo SystemJS)

/// <reference path="../../../typings/tsd.d.ts" />
import * as moment from "moment";
import * as _ from "lodash";
...
...
const now = (this.timestamp === 0) ? moment() : moment(this.timestamp);

Obtengo un " TypeError: el momento no es una función "

Las definiciones están estructuradas de la misma manera que lodash , que funciona bien, así que no sé cuál podría ser la causa.

¿Alguien puede ayudar?

Answer 1

Acabo de hacerlo en mi proyecto. Es angular, pero no creo que eso importe y puede ponerte en el camino correcto. Es fácil como:

import MomentStatic = moment.MomentStatic;

class HelpdeskTicketController {
  constructor(private moment: MomentStatic) { // angulars dependency injection, you will have some global probably
    let d = this.moment(new Date()); // works
    console.log(d.add(2, ''hours'').format()); // works
  }

  ...

Answer 2

Desde la versión 2.13, el momento incluye tipificaciones de Typescript. Ya no es necesario usar tsd (o typings ).

En el archivo systemjs.config.js , solo agregue lo siguiente:

  var map = {
    // (...)
    moment: ''node_modules/moment'',      
  };

  var packages = {
    // (...)
    moment: { main: ''moment.js'', defaultExtension: ''js'' },
  };

Y en el módulo:

import moment = require(''moment'')

Answer 3

En mi archivo mecanografiado, cuando uso

import moment from ''moment'';

dice que no puede encontrar el módulo ''momento''. He instalado el momento como paquete npm y se hace referencia a él correctamente, pero por la razón, ese momento.d.ts exporta el momento como espacio de nombres, no módulo, como a continuación, no puedo hacer referencia a él.

export = moment; 

Entonces si lo cambio a

declare module ''moment'' {
    export default moment;
}

la importación funciona a la perfección. ¿Qué estoy haciendo mal aquí?

Answer 4

Esto funciona con Angular 2 pero no debe ser específico para él. Básicamente le moment.min.js al cargador del sistema dónde encontrar moment.min.js .

En system.config.js :

// map tells the System loader where to look for things
var map = {
  ''app'':                        ''app'', // ''dist'',

  ''@angular'':                   ''node_modules/@angular'',
  ''rxjs'':                       ''node_modules/rxjs'',

  // tell system where to look for moment
  ''moment'':                     ''node_modules/moment/min''
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
  ''app'':                        { main: ''main.js'',  defaultExtension: ''js'' },
  ''rxjs'':                       { defaultExtension: ''js'' },

  // tell system which file represents the script when you import
  ''moment'':                     { main: ''moment.min.js'', defaultExtension: ''js''}
};

En tu módulo:

import moment from ''moment'';

O (Editar 13/10/2016):

import * as moment from ''moment'';

Algunos comentaristas han publicado la sintaxis de import * arriba y tuve que cambiar a eso también después de algunas actualizaciones (no estoy seguro de por qué).

Answer 5

Hice lo siguiente:

Instalé el archivo de definición de moment siguiente manera:

tsd install moment --save

Luego 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 moment_1 como PLACE XY arriba, puede ver que el moment_1 es un objeto (!) Y no una función. Líneas relevantes: 1 , 2

Para concluir, el problema no tiene nada que ver con TypeScript. El problema es que el sistema no conserva la información que el momento 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 debes archivar un problema en el repositorio de systemjs para saber si lo consideran un error (o una característica :)).

Answer 6

No está claro si intenta utilizar el momento para el desarrollo del lado del cliente o para el lado del servidor (por ejemplo, node.js). Pero, si su caso es front-end, entonces pude usar el momento bastante fácil:

1) Acabo de agregar archivos a mi proyecto:

2) Escribió un código de prueba simple:

window.onload = () =>
{
    var timestamp: number = 111111111111111;
    var momentResult: moment.Moment = moment(timestamp);
    alert(momentResult.toISOString());
};

Y mi proyecto se construyó bien y vi una alerta de prueba en el navegador.

Answer 7

Para mis cosas, uso Webpack con VS 2015 (Actualización 3). Entonces, después de agregar códigos para los archivos package.json y webpack.config.vendor.js, solo necesito llamar a import moment = require (''moment'') en la parte superior de mi componente (TypeScript, Angular 2).

Answer 8

Supongo que el momento fue instalado usando

jspm install moment

Esto debería agregar una entrada en la sección del mapa de su config.js.

...
"moment": "npm:[email protected]",
...

De esta forma puede acceder al momento en sus archivos js a través de

import moment from ''moment'';

console.log(moment().format(''dddd, MMMM Do YYYY, h:mm:ss a''));

Cuando importa * as moment , importa el espacio de nombres del módulo. Entonces el momento será un objeto cuyas propiedades son exportaciones de módulos. De esta forma, la exportación predeterminada no se importa como momento sino como moment.default. Así que algo así como

moment.default().format(''dddd, MMMM Do YYYY, h:mm:ss a'')

en realidad podría funcionar en tu código, pero no es la forma en que está destinado a ser utilizado.

Answer 9

Tuve un gran problema para hacer que esto funcionara, ya que no podía usar npm debido a restricciones de proxy (por lo tanto, tuve que instalar manualmente las bibliotecas). Siempre que las versiones de momento y los archivos de tipo definitivo estén instalados en ubicaciones apropiadas en su proyecto, puede hacer que esto funcione con un poco de manipulación.

Aquí hay una nota útil en el sitio web moment.js sobre cómo configurar mecanografiado con el momento. El aspecto clave que ayudó en mi caso fue agregar lo siguiente en la sección compilerOptions de mi archivo tsconfig.json:

"allowSyntheticDefaultImports": true