web-dev-qa-db-ja.com

typescriptでmoment.jsをインポートするにはどうすればよいですか？

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ビルドを実行すると、次のメッセージが表示されます："../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; }

2番目のエラーは消えますが、main.tsファイルで作業する時間を得るためにrequireステートメントが必要であり、最初のビルドエラーが引き続き発生しています。

しばらくの間、独自の.d.tsファイルを作成する必要がありますか、それとも不足しているセットアップ要素がいくつかありますか？

typescriptmomentjsjspm
61
peinearydevelopment

Update

どうやら、モーメントは独自の型定義を提供するようになりました（少なくとも sivabudh 2.14.1以降）。したがって、typingsや@typesはまったく必要ありません。

import * as moment from 'moment'は、npmパッケージで提供される型定義をロードする必要があります。

ただし、 moment/pull/3319＃issuecomment-263752265 で述べたように、これらの定義を維持するのにチームが問題を抱えているように見える瞬間（彼らはまだ維持している人を探しているそれら）。

--ambientフラグなしでmomentタイピングをインストールする必要があります。

次に、import * as moment from 'moment'を使用してインクルードします

78
Aides

moment（）関数とMomentクラスを個別にインポートする必要がありますTSで。

TypeScriptドキュメントでメモを見つけました here 。

/ *〜ES6モジュールは呼び出し可能な関数を直接エクスポートできないことに注意してください。 *〜このファイルは、CommonJSスタイルを使用してインポートする必要があります。*〜import x = require（ 'someLibrary'）;

そのため、モーメントjsをTypeScriptにインポートするコードは実際には次のようになります。

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

タイピング経由

Moment.jsはv2.14.1でTypeScriptをサポートするようになりました。

参照： https://github.com/moment/moment/pull/328

直接

最良の答えではないかもしれませんが、これは総当たり的な方法であり、私にとってはうまくいきます。

  1. 実際のmoment.jsファイルをダウンロードして、プロジェクトに含めるだけです。
  2. たとえば、私のプロジェクトは次のようになります。

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

  1. 次に、ソースコードのサンプルを示します。

`` `

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'));
  1. nodeを使用してmain.jsを実行します。
14
sivabudh

これがいつ変更されたかはわかりませんが、TypeScriptの最新バージョンでは、import moment from 'moment';を使用するだけでよく、他のすべては通常どおり動作するはずです。

更新：

最近、インポートが修正されたようです。少なくとも2.24.0では、import * as moment from 'moment';を使用する必要があります。

8
NSjonas

1。インストールの瞬間

npm install moment --save

2。TypeScriptファイルでこのコードをテストする

import moment = require('moment');

console.log(moment().format('LLLL'));
1
hardy lutula