Angular 2 - TypeError：无法读取未定义的属性“createMessage”

Question

我有以下 Javascript 文件，我想将其导入到我的 Angular 2 项目中，而无需在 Typescript 中重写整个内容。

当一切都正确绑定时，我收到以下错误...

“异常：类型错误：无法读取未定义的属性‘createMessage’”

这是我对应的文件...

applicationAPI.js

var myApplication = myApplication || {};

(function(myApplication) {

myApplication.Message = function() {
    this.m_messageContents = "New Message";
};

myApplication.Message.prototype.getApplicationMessageContents = function() {
    return this.m_messageContents;
};

myApplication.SystemFactory = (function(){
    var factory =        
    {
        createMessage: function() {
            return new myApplication.Message();
        }
    };
    return factory;
}());

}(myApplication));

applicationAPI.d.ts

declare module "myApplicationAPI" {

export interface Message {
    getApplicationMessageContents(): string;
}

export class SystemFactory {
    static createMessage(): Message;
}

}

奇怪的是，当 applicationAPI.js 使用相同的 applicationAPI.d.ts 文件时，我可以让它工作。

applicationAPI.js

(function() {

this.Message = function() {
    this.m_messageContents = "New Message";
};

this.Message.prototype.getApplicationMessageContents = function() {
    return this.m_messageContents;
};

this.SystemFactory = (function(){
    var factory =        
    {
        createMessage: function() {
            return new this.Message();
        }
    };
    return factory;
}());}());

您有什么想法还需要添加什么才能让这个场景起作用吗？这对我来说并不明显......

这是来电的来源...

home.component.ts

import { Component, OnInit } from '@angular/core';
import * as myApp from "myApplicationAPI";
@Component({
moduleId: module.id,
selector: 'app-home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.css']
})
export class HomeComponent implements OnInit {
title: string;

constructor() {}
ngOnInit() {
this.title = myApp.SystemFactory.createMessage().getApplicationMessageContents();
}
}

Answer 1

您没有从 applicationAPI.js 中导出任何内容，因此您无法从中导入任何内容。当你 import * as myApp from "myApplicationAPI"; 时，你并没有得到你认为你得到的东西。

您的第一反应可能是导出myApplication，但您应该导出类和接口，而不是实例。让 Angular 的 Dependency Injector 处理实例。

我会推荐一个更像这样的模式：

applicationAPI.ts

import Injectable from '@angular/core';
// either define Message in this file or import it as well
// if you define it here, export it as well

@Injectable
export class Api {
  static createMessage(): Message {
    return new Message();
  }
}

home.component.ts

import Api from 'applicationAPI';
...
  constructor (private api: Api) {...}

假设您的引导调用看起来像 bootstrap(HomeComponent) 它应该更改为

import Api from 'applicationAPI';
...
bootstrap(HomeComponent, [Api]);

这将确保每次注入 Api 时，它都是同一个实例，尽管如果类上的所有方法都是静态的，这对您来说可能无关紧要。

.d.ts 文件被 typescript 编译器用作参考，它会说“相信我，有些东西看起来和行为都像这样”，例如当你希望你的 typescript 与 JS 库交互时。该库仍然必须在.d.ts 文件之外的其他地方定义。 您放入.d.ts 文件中的任何内容都不会执行，甚至不会被浏览器看到。 如果Message 仅在.d.ts 文件中定义，那么您不能使用new Message，因为在当 javascript 在浏览器中运行的那一天结束时，Message 是什么将没有任何定义。