Як можна імпортувати moment.js за допомогою TypeScript?

Я намагаюся вивчити Typescript. Хоча я не вважаю це доречним, я використовую VSCode для цієї демонстрації.

У мене є такий package.jsonшматок:

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "jspm": "^0.16.33",
    "typescript": "^1.8.10"
  },
  "jspm": {
    "moment": "npm:moment@^2.12.0"
  }
}

Тоді у мене є клас Typescript, main.jsтакий:

import moment from 'moment';
export class Main {
}

Я gulpfile.jsвиглядаю так:

var gulp = require('gulp');
var typescript = require('gulp-tsb');
var compilerOptions = {
                        "rootDir": "src/",
                        "sourceMap": true,
                        "target": "es5",
                        "module": "amd",
                        "declaration": false,
                        "noImplicitAny": false,
                        "noResolve": true,
                        "removeComments": true,
                        "noLib": false,
                        "emitDecoratorMetadata": true,
                        "experimentalDecorators": true
                      };
var typescriptCompiler = typescript.create(compilerOptions);
gulp.task('build', function() {
  return gulp.src('/src')
    .pipe(typescriptCompiler())
    .pipe(gulp.dest('/dest'));
});

Коли я запускаю gulp build, я отримую повідомлення: "../main.ts(1,25): Cannot file module 'moment'."

Якщо я використовую, import moment = require('moment');тоді jspm буде працювати і використовувати модуль під час запуску програми, але я все ще отримую помилку збірки. Я також спробував:

npm install typings -g
typings install moment --ambient --save

Замість того, щоб покращити проблему, вона погіршилася. Тепер я отримую вищевказану помилку при побудові, а також наступне:"../typings/browser/ambient/moment/index.d.ts(9,21): Cannot find namespace 'moment'."

Якщо я перейду до файлу, наданого типізацією, і додаю внизу файлу:

declare module "moment" { export = moment; }

Я можу зникнути другу помилку, але мені все ще потрібен оператор require, щоб отримати момент для роботи у моєму main.tsфайлі, і я все ще отримую першу помилку збірки.

Чи потрібно мені створювати власний .d.tsфайл на певний момент, чи мені просто не вистачає якоїсь частини налаштування?

Оновлення

Очевидно, зараз moment надає власні визначення типу (згідно з sivabudh принаймні з 2.14.1 вгору), отже, вам це не потрібно typingsабо @typesвзагалі.

import * as moment from 'moment' повинен завантажувати визначення типів, надані разом із пакетом npm.

Однак, як зазначено в moment / pull / 3319 # issuecomment-263752265, у команди на даний момент, мабуть, є деякі проблеми з підтримкою цих визначень (вони все ще шукають того, хто їх підтримує) .

Вам потрібно встановити momentтипізацію без --ambientпрапора.

Потім включіть його за допомогою import * as moment from 'moment'

Вам потрібно імпортувати функцію moment () функції та Moment класу окремо в TS.

Я знайшов примітку в документах машинопису тут .

/ * ~ Зверніть увагу, що модулі ES6 не можуть безпосередньо експортувати функції, що викликаються
* ~ Цей файл слід імпортувати, використовуючи стиль CommonJS:
* ~ import x = require ('someLibrary');

Отже, код для імпорту моменту js у typecript насправді виглядає так:

import { Moment } from 'moment'
....
let moment = require('moment');
...
interface SomeTime {
  aMoment: Moment,
}
...
fn() {
  ...
  someTime.aMoment = moment(...);
  ...
}

Не впевнений, коли це змінилося, але з останньою версією машинопису вам просто потрібно використовувати, import moment from 'moment';а все інше має працювати як зазвичай.

ОНОВЛЕННЯ:

Схоже, що нещодавно виправлено імпорт. Принаймні 2.24.0ви хочете використовуватиimport * as moment from 'moment';

за допомогою набору тексту

Moment.js тепер підтримує TypeScript у версії 2.14.1.

Див .: https://github.com/moment/moment/pull/3280

Безпосередньо

Можливо, це не найкраща відповідь, але це спосіб грубої сили, і він працює для мене.

1. Просто завантажте фактичний moment.jsфайл і включіть його у свій проект.
2. Наприклад, мій проект виглядає так:

$ tree . ├── main.js ├── main.js.map ├── main.ts └── moment.js

3. І ось зразок вихідного коду:

``

import * as moment from 'moment';

class HelloWorld {
    public hello(input:string):string {
        if (input === '') {
            return "Hello, World!";
        }
        else {
            return "Hello, " + input + "!";
        }
    }
}

let h = new HelloWorld();
console.log(moment().format('YYYY-MM-DD HH:mm:ss'));

4. Просто використовуйте nodeдля бігу main.js.

Я щойно помітив, що відповідь, яку я підтримав і прокоментував, є неоднозначною. Отже, саме те, що мені вдалося. Зараз я працюю на моменті 2.26.0та TS 3.8.3:

У коді:

import moment from 'moment';

У конфігурації TS:

{
  "compilerOptions": {
    "esModuleInterop": true,
    ...
  }
}

Я будую як для CommonJS, так і для EMS, тому ця конфігурація імпортується в інші конфігураційні файли.

Розуміння випливає з цієї відповіді, яка стосується використання Express. Я зрозумів, що варто додати сюди, щоб допомогти кожному, хто шукає за Moment.js, а не чимсь загальнішим.

1. встановити момент

npm install moment --save

2. протестуйте цей код у своєму файлі машинопису

import moment = require('moment');

console.log(moment().format('LLLL'));

Все ще зламаний? Спробуйте видалити @types/moment.

Отже, я видалив @types/momentпакет з package.jsonфайлу, і він працював за допомогою:

import * as moment from 'moment'

Новіші версії пакета momentне вимагають @types/momentпакета, оскільки типи вже включені.