角2 - TypeError：未定義のプロパティ 'createMessage'を読み取ることができません

Question

私は私の角型2プロジェクトにインポートするために、私は、Typescriptのすべてを書き直すことなく、次のJavascriptファイルを持っています。

すべてが正しく接続されていたとき、私は次のエラーを取得する...

「EXCEPTION：例外TypeError：未定義のプロパティを読み取ることができません 『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; 
}());}()); 

このシナリオが動作するために追加する必要がある他に何上の任意の考え？それはあなたがapplicationAPIの外に何かを輸出していない...呼び出しがどこから来ている。これはある...

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

私には明らかにされていません。あなたはそれから何かをインポートすることはできません。あなたが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コンパイラによって、typescriptでJSライブラリとのインターフェイスを設定する場合など、ファイルを "信頼する、見た目がよく、このようなものがあります"という行を参照するために使用されます。そのライブラリは、まだ.d.tsファイルの外側にある別の場所で定義する必要があります。 .d.tsファイルに入力したものは、実行されず、ブラウザによっても表示されません。Messageが.d.tsファイルでのみ定義されている場合は、new Messageを使用することはできません。その日の終わりに、ブラウザでJavaScriptが実行されているため、Messageの定義はありません。