2016-03-14 93 views
1

tl; dr:我需要將已編譯的Typescript原型定義應用於我已定義爲該類的對象。通過打字稿擴展JavaScript對象原型


情況: 我需要一個打字稿類中定義一些業務邏輯來擴展JavaScript對象。
這可能看起來有點像:

class Address 
{ 
    constructor(
    public Street: string, 
    public Number: number, 
    public Zip: number, 
    public City: string) 
    { } 

    public get FullAddress() 
    { 
    return this.Street + ' ' + this.Number + ', ' 
     + this.Zip + ' ' + this.City; 
    } 
} 

編譯加上JS代碼由FullAddress擴展對象原型。如果我打電話new Address('Somestreet', 5, 3564, 'SomeCity')一切都像一個魅力。


問題:當我(採用了棱角分明的$http在我的情況)

$http.get('/api/address').then((answer: AngularPromise<Address[]>) => 
{ 
    console.log(answer.data[0].FullAddress()); 
}); 

得到一些JS對象我可以調用函數FullAddress的對象,因爲在打字稿的功能定義上類定義。

現在,當我在瀏覽器中執行代碼answer.data.FullAddress()沒有定義(這是有道理的,因爲打字稿只是提供了類型定義,從來沒有觸摸的物體


嘗試性解決方案:一個可能的解決辦法是調用構造爲每個對象(有點像以下)

$http.get('/api/address').then((answer: AngularPromise<Address[]>) => 
{ 
    for(var i = 0; i < answer.data.length; i++) 
    { 
    answer.data[0] = new Address(answer.data[0].Street, ans.....); 
    } 
    console.log(answer.data[0].FullAddress()); 
}); 

,也許過載Address構造以接受併發症ete反對減少樣板。


實際的問題:因爲我需要的對象是一種更爲複雜的嵌套的結構比這裏所描述的,上面的解決方案,簡單的地址結構需要我寫樣板的大量的,我覺得好像有必須是解決這個問題的更好辦法。

回答

0

有這個相同的問題!正如你所說的,一種方法是製作一個構造函數並提供所有信息 - 有點乏味,而且看起來不對。我們最終作出MapTo功能,可以一個通用的對象映射到一個強大的類:

public static MapTo(jsonObject, nameSpace, classType) { 
    var instance = new classType(); 
    for (var prop in jsonObject) { 
     if (!jsonObject.hasOwnProperty(prop)) { 
      continue; 
     } 

     if (jsonObject[prop] == null) { 
      instance[prop] = null; 
     } else if (typeof jsonObject[prop] === 'object') { 
      if (nameSpace[prop]) { 
       instance[prop] = this.MapTo(jsonObject[prop], nameSpace, nameSpace[prop]); 
      } else { 
       instance[prop] = jsonObject[prop]; 
      } 
     } else { 
      instance[prop] = jsonObject[prop]; 
     } 
    } 

    return instance; 
} 

而且用法是:

var strongAddress = MapTo(answer.data[0], Models, Models.Address); //I assumed your class was in a namespace called "Models" 
+0

有趣的方法......還是感覺有點靠不住,但已經這樣更好。 我的問題是:我擔心它只適用於內部模塊,對(因爲我在Angular和NodeJS中使用我的類,所以我只使用外部模塊:|) – Aides