Aurelia CLI和TypeScript& MomentJS [英] Aurelia CLI & TypeScript & MomentJS

问题描述

我没有获得Aurelia(CLI)和TypeScript& MomentJS一起工作.我已经看到了Aurelia&的解决方案瞬间出现问题，但它们不使用Aurelia CLI.

I'm not getting Aurelia (CLI) & TypeScript & MomentJS to work together. I've seen solutions for Aurelia & Moment problems but they don't use the Aurelia CLI.

这是我目前正在做的事情:

Here's what I'm doing at the moment:

使用Aurelia CLI的新Aurelia项目:

au new 

我选择TypeScript而不是Babel.

I select TypeScript instead of Babel.

安装时刻

npm install moment --save

这将安装Moment 2.4.1.我可以从node_modules中找到它(包括moment.d.ts).

This installs Moment 2.4.1. I can find it (including the moment.d.ts) from node_modules.

编辑aurelia.json

我在依赖项"中添加时刻":

I Add "moment" to "dependencies":

在app.ts中使用Moment

当我现在尝试在app.ts中导入Moment时，问题就开始了.

Problems start when I now try to import Moment in app.ts.

import { moment } from 'moment';

这会导致错误:模块"o:/dev/spikes/amoment/node_modules/moment/moment"没有导出的成员'moment'

This gives error: "Module "o:/dev/spikes/amoment/node_modules/moment/moment" has no exported member 'moment'

更改机壳可解决此错误:

Changing the casing fixes this error:

import { Moment } from 'moment';

但是在这一点上，我完全陷入了困境.尝试使用动量(或动量)时，总是出现错误无法找到名称'moment'.这是当前的app.ts，给出的是无法找到名称'moment'"-错误:

But at this point I'm totally stuck. When trying to use moment (or Moment), I always get error "Cannot find name 'moment'. Here's the current app.ts which is giving the "Cannot find name 'moment'" -error:

import { Moment } from 'moment';

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

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

导入似乎是问题所在.有什么想法可以解决这个问题吗?

The import seems to be the problem. Any ideas how to get around this?

更新

将app.ts修复如下所示后，现在可以编译该东西了.但运行时会显示"TypeError:无法读取未定义的属性'format'".

After fixing the app.ts to look like the following, the thing now compiles. But it gives "TypeError: Cannot read property 'format' of undefined" when run.

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的情况下autoinject无法正常工作.因此添加了错误，错误发生了变化:"TypeError:moment.format不是函数".

Based on the last error, it seems that autoinject wasn't working without @autoinject. So added that and the error changes: "TypeError: moment.format is not a function".

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

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

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

推荐答案

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

MomentJS is a global module, which exports a moment variable only. Other interface definitions in the d.ts file, e.g. interface Moment, won't be exported for real. Those are there for the TypeScript compiler and intellisense.

这就是为什么您遇到上述TS编译器和TypeError问题的原因.您可能使用autoinject欺骗了编译器，但没有使用浏览器.

That's why you've experienced TS compiler and TypeError issues above. You may've tricked the compiler with autoinject but not the browser.

moment的定义文件:

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

为了使其正常运行，请使用如下所示的导入语句:> ]

In order to get it working, use an import statement like this: [moment docs]

import * as moment from 'moment';

此后，moment变量变为可用，您可以照常使用它.

After that, the moment variable becomes available and you can use it as you normally would.

在课堂上的用法:

import * as moment from 'moment';

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

    constructor(){
    }

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

这篇关于Aurelia CLI和TypeScript& MomentJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！