如何使用打字稿导入moment.js?

时间:2016-04-15 13:15:41

标签: typescript momentjs jspm

我正在尝试学习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'."

如果我转到typings提供的文件并添加到文件的底部:

declare module "moment" { export = moment; }

我可以得到第二个错误消失,但我仍然需要require语句才能在我的main.ts文件中工作,但仍然遇到第一个构建错误。

我是否需要暂时创建自己的.d.ts文件,或者只是缺少一些设置文件?

7 个答案:

答案 0 :(得分:76)

<强> 更新

显然,片刻现在提供了自己的类型定义(根据sivabudh至少从2.14.1开始),因此您根本不需要typings@types

import * as moment from 'moment'应该加载npm包提供的类型定义。

然而,正如在moment/pull/3319#issuecomment-263752265中所说的那样,团队似乎在维护这些定义方面遇到了一些问题(他们仍在寻找维护这些定义的人)

您需要在没有moment标记的情况下安装--ambient打字。

然后使用import * as moment from 'moment'

加入

答案 1 :(得分:31)

您需要在TS中分别导入 moment()函数和 Moment 类。

我在打字稿文档here中找到了一条说明。

  

/ *〜注意,ES6模块不能直接导出可调用函数。    *〜此文件应使用CommonJS样式导入:    * ~import x = require(&#39; someLibrary&#39;);

因此,将时刻js导入typescript的代码实际上如下所示:

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

答案 2 :(得分:14)

通过打字

Moment.js现在支持v2.14.1中的TypeScript。

请参阅:https://github.com/moment/moment/pull/3280

<强>直接

可能不是最好的答案,但这是蛮力的方式,它对我有用。

  1. 只需下载实际的moment.js文件并将其包含在您的项目中。
  2. 例如,我的项目如下所示:
  3. $ tree . ├── main.js ├── main.js.map ├── main.ts └── moment.js

    1. 这是一个示例源代码:
    2. ```

      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

答案 3 :(得分:8)

不确定何时更改,但是使用最新版本的打字稿,您只需要使用import moment from 'moment';,其他所有内容都可以正常使用。

更新:

看起来像是最近刚刚修复了它们的导入。从2.24.0起,您至少要使用import * as moment from 'moment';

答案 4 :(得分:2)

我刚刚注意到,我投票并评论的答案是模棱两可的。因此,以下正是对我有用的方法。我目前正在使用Moment 2.26.0和TS 3.8.3

在代码中:

import moment from 'moment';

在TS配置中:

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

我正在为 CommonJS和EMS进行构建,因此此配置将导入到其他配置文件中。

见解来自this answer,与使用Express有关。我认为值得在此添加,以帮助与Moment.js相关的人员,而不是更笼统的人员。

答案 5 :(得分:1)

1。安装时刻

Option Explicit

Sub CopyPasteMacro()
Dim iCounter As Integer
Dim iCounterString As String
Dim iCounterStringA As String

    For iCounter = 1 To 180
        iCounterStringA = "A" + CStr(iCounter)
        iCounterString = CStr(iCounter)
        If SheetExists(iCounterString) Then
            Worksheets(iCounterString).Range("D4").Value = Worksheets("datastore").Range(iCounterStringA).Value
        Else
            ' Do sth: Maybe a message to tell you sheetname does not exist
            MsgBox "Sheet -" & iCounterString & "- does not exist", vbOKOnly, "Sheet Does not exist"
        End If
    Next iCounter
End Sub



Function SheetExists(ByVal SheetNameOrIndex As Variant, _
                     Optional ByVal Wb As Workbook = Nothing) As Boolean
'True if sheet SheetNameOrIndex exists
    On Error Resume Next
    If Wb Is Nothing Then Set Wb = ActiveWorkbook
    SheetExists = Not Wb.Sheets(SheetNameOrIndex) Is Nothing
End Function

2。在您的打字稿文件中测试此代码

npm install moment --save

答案 6 :(得分:0)

还是坏了?尝试卸载@types/moment

因此,我从@types/moment文件中删除了package.json软件包,它可以使用:

import * as moment from 'moment'

较新版本的moment不需要@types/moment软件包,因为已经包含了类型。