Aurelia & TypeScript & MomentJS

Question

我不能让Aurelia (CLI)和TypeScript & MomentJS一起工作。我已经看到了Aurelia &矩问题的解决方案，但是他们没有使用Aurelia。

我现在正在做的事情是：

使用Aurelia：新的Aurelia项目：

au new 

我选择TypeScript而不是Babel。

安装力矩

npm install moment --save

这个安装时刻为2.4.1。我可以从node_modules找到它(包括moment.d.ts)。

编辑aurelia.json

我在“依赖项”中添加“瞬间”：

​

​

在app.ts中的使用矩

当我现在尝试导入app.ts的时候，问题就开始了。

import { moment } from 'moment';

这就产生了错误：“模块"o:/dev/spikes/amoment/node_modules/moment/moment”没有导出成员的‘瞬间’

更改套管修复了此错误：

import { Moment } from 'moment';

但现在我完全被困住了。在尝试使用矩(或矩)时，我总是会遇到错误“无法找到名称的‘瞬间’”。下面是当前的app.ts，它给出了“无法找到名称‘瞬间’”-error：

import { Moment } from 'moment';

export class App {
  message = 'Hello World!';

  hello() : string {
    return moment.format();
  }
}

进口似乎是问题所在。有什么办法绕过这件事吗？

更新

在将app.ts修复为如下所示之后，现在编译。但在运行时，它给出了"TypeError:无法读取未定义的属性‘格式“。

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

export class App {
  message: string;
  moment: Moment;

  constructor(moment: Moment) {
    this.moment = moment;
    this.message = this.moment.format('MMMM Do YYYY, h:mm:ss a')
  }
}

更新

根据最后一个错误，如果没有@autoinject，则自动注入似乎无法工作。因此，错误发生了变化："TypeError: moment.format不是函数“。

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

@autoinject
export class App {
  message: string;
  moment: Moment;

  constructor(moment: Moment) {
    this.message = moment.format();
  }
}

Answer 1

MomentJS是一个全局模块，它只导出一个moment变量。d.ts文件中的其他接口定义，例如interface Moment，不会真正导出。这些是用于TypeScript编译器和intellisense的。

这就是为什么您在上面经历了TS编译器和TypeError问题。您可能用自动注入来欺骗编译器，但没有使用浏览器。

矩量定义文件

declare module 'moment' {
    var moment: moment.MomentStatic;
    export = moment;
}

为了使它正常工作，使用如下所示的导入语句：[瞬间医生]

import * as moment from 'moment';

之后，moment变量就可用了，您可以像往常一样使用它。

类中的用法：

import * as moment from 'moment';

export class App {
    message = 'Hello World!';

    constructor(){
    }

    hello() : string {
        return moment().format();
    }
}

Answer 2

更新

这实际上不起作用。不是编译的东西，但在运行应用程序时，我得到了"TypeError:无法读取未定义的属性“。

原始

啊，愚蠢的我。我只需要给班上注射点时间。很明显。

下面是工作版本：

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

export class App {
  message = 'Hello World!';
  moment: Moment;

  constructor(moment : Moment){
    this.moment = moment;
  }

  hello() : string {
    return this.moment.format();
  }
}