Angular 2 - TypeError：無法讀取未定義的屬性'createMessage'

Question

我有以下Javascript文件，我想導入到我的Angular 2項目中，而無需在Typescript中重新編寫整個內容。

當一切都正確綁起來，我得到以下錯誤...

「EXCEPTION：類型錯誤：未定義無法讀取屬性‘的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的依賴注入器處理實例。

我推薦的模式更像是這樣的：

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編譯器用作參考，說的是「相信我，有些東西看起來像這樣」，比如當你想讓你的打字稿與一個JS庫連接時。該庫仍然必須在.d.ts文件之外的其他地方定義。 你放入.d.ts文件的任何內容都不會被瀏覽器執行，甚至被瀏覽器看到。如果Message僅在.d.ts文件中定義，那麼您不能使用new Message，因爲在JavaScript在瀏覽器中運行的那一天結束時，將不會有任何Message的定義。